Merge branch 'release/v1.9.3'

Release v1.9.3
Merge branch 'feature/ui-tests' into develop
2026-03-10 02:47:01 +00:00 · 2023-09-27 17:32:15 +13:00 · 2023-09-27 17:32:15 +13:00 · 2023-09-27 17:29:20 +13:00 · 2023-09-27 17:29:03 +13:00 · 2023-09-26 19:04:04 +13:00
97 changed files with 4732 additions and 3079 deletions
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -1,14 +1,14 @@
 name: Tests
 on:
  pull_request:
-    branches: [ develop ]
+    branches: [ develop, 'feature/**' ]
  push:
    branches: [ develop, 'feature/**' ]
 jobs:
  test:
    strategy:
      matrix:
-        go-version: [1.18.x]
+        go-version: [1.21.x]
        os: [ubuntu-latest]
    runs-on: ${{ matrix.os }}
    steps:
@@ -24,8 +24,8 @@ jobs:
        key: ${{ runner.os }}-go-${{ hashFiles('**/go.sum') }}
        restore-keys: |
          ${{ runner.os }}-go-
-    - run: go test ./storage ./server -v
-    - run: go test ./storage -bench=.
+    - run: go test ./internal/storage ./server ./internal/tools -v
+    - run: go test ./internal/storage -bench=.
    
    # build the assets
    - uses: actions/setup-node@v3
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,83 @@

 Notable changes to Mailpit will be documented in this file.

+## [v1.9.3]
+
+### Chore
+- Update internal/storage import paths
+- Move storage package to internal/storage
+- Update internal import paths
+- Move utils/* packages to internal/*
+
+### Testing
+- Add endpoints for integration tests
+
+### Tests
+- Add more API tests
+- Add tests for ArgsParser & CleanTag
+
+### UI
+- Do not show excluded search tags as "current" in nav
+- Display "Loading messages" instead of "No results" while loading results
+- Only queue broadcast events if clients are connected
+
+
+## [v1.9.2]
+
+### Fix
+- Delete all messages matching search when more than 1000 results
+
+### Libs
+- Update node modules
+
+### Tests
+- Add message tag tests
+- Add search delete tests
+
+### UI
+- Reset pagination when returning to inbox from search
+
+
+## [v1.9.1]
+
+### Chore
+- Update caniemail data
+
+### Libs
+- Update Go modules
+
+### UI
+- Set 404 page when loading a non-existent message
+- Link email addresses in message summary to search
+- Better support for mobile screen sizes
+
+
+## [v1.9.0]
+
+### API
+- Remove redundant `Read` status from message (always true)
+- Delete by search filter
+- Add endpoint to return all tags in use
+
+### Feature
+- Improved search parser
+- New search filter `[!]is:tagged`
+
+### Fix
+- Correctly escape certain characters in search (eg: `'`)
+
+### Libs
+- Update minimum Go version to 1.20
+- Update Go modules
+- Update node modules
+
+### Tests
+- Bump Go version to 1.21
+
+### UI
+- Rewrite web UI, add URL routing and components
+
+
 ## [v1.8.4]

 ### Fix
--- a/cmd/root.go
+++ b/cmd/root.go
@@ -8,10 +8,10 @@ import (
 	"strings"

 	"github.com/axllent/mailpit/config"
+	"github.com/axllent/mailpit/internal/logger"
+	"github.com/axllent/mailpit/internal/storage"
 	"github.com/axllent/mailpit/server"
 	"github.com/axllent/mailpit/server/smtpd"
-	"github.com/axllent/mailpit/storage"
-	"github.com/axllent/mailpit/utils/logger"
 	"github.com/spf13/cobra"
 )

@@ -142,7 +142,7 @@ func init() {

 // Load settings from environment
 func initConfigFromEnv() {
-	// defaults from envars if provided
+	// inherit from environment if provided
 	if len(os.Getenv("MP_DATA_FILE")) > 0 {
 		config.DataFile = os.Getenv("MP_DATA_FILE")
 	}
--- a/cmd/version.go
+++ b/cmd/version.go
@@ -6,7 +6,7 @@ import (
 	"runtime"

 	"github.com/axllent/mailpit/config"
-	"github.com/axllent/mailpit/utils/updater"
+	"github.com/axllent/mailpit/internal/updater"
 	"github.com/spf13/cobra"
 )

--- a/config/config.go
+++ b/config/config.go
@@ -10,9 +10,8 @@ import (
 	"regexp"
 	"strings"

-	"github.com/axllent/mailpit/utils/logger"
-	"github.com/axllent/mailpit/utils/tools"
-	"github.com/mattn/go-shellwords"
+	"github.com/axllent/mailpit/internal/logger"
+	"github.com/axllent/mailpit/internal/tools"
 	"github.com/tg123/go-htpasswd"
 	"gopkg.in/yaml.v3"
 )
@@ -228,13 +227,8 @@ func VerifyConfig() error {

 	SMTPTags = []AutoTag{}

-	p := shellwords.NewParser()
-
 	if SMTPCLITags != "" {
-		args, err := p.Parse(SMTPCLITags)
-		if err != nil {
-			return fmt.Errorf("Error parsing tags (%s)", err)
-		}
+		args := tools.ArgsParser(SMTPCLITags)

 		for _, a := range args {
 			t := strings.Split(a, "=")
--- a/docs/apiv1/Message.md
+++ b/docs/apiv1/Message.md
@@ -16,7 +16,6 @@ Returns a JSON summary of the message and attachments.
 {
  "ID": "d7a5543b-96dd-478b-9b60-2b465c9884de",
  "MessageID": "12345.67890@localhost",
-  "Read": true,
  "From": {
    "Name": "John Doe",
    "Address": "john@example.com"
@@ -58,7 +57,6 @@ Returns a JSON summary of the message and attachments.
 ```
 ### Notes

- `Read` - always true (message marked read on open)
 - `From` - Name & Address, or null
 - `To`, `CC`, `BCC`, `ReplyTo` - Array of Names & Address
 - `Date` - Parsed email local date & time from headers
--- a/go.mod
+++ b/go.mod
@@ -1,20 +1,19 @@
 module github.com/axllent/mailpit

-go 1.18
+go 1.20

 require (
 	github.com/GuiaBolso/darwin v0.0.0-20191218124601-fd6d2aa3d244
 	github.com/PuerkitoBio/goquery v1.8.1
 	github.com/axllent/semver v0.0.1
 	github.com/disintegration/imaging v1.6.2
-	github.com/gomarkdown/markdown v0.0.0-20230716120725-531d2d74bc12
+	github.com/gomarkdown/markdown v0.0.0-20230922112808-5421fefb8386
 	github.com/gorilla/mux v1.8.0
 	github.com/gorilla/websocket v1.5.0
-	github.com/jhillyerd/enmime v1.0.0
+	github.com/jhillyerd/enmime v1.0.1
 	github.com/k3a/html2text v1.2.1
-	github.com/klauspost/compress v1.16.7
+	github.com/klauspost/compress v1.17.0
 	github.com/leporo/sqlf v1.4.0
-	github.com/mattn/go-shellwords v1.0.12
 	github.com/mhale/smtpd v0.8.0
 	github.com/reiver/go-telnet v0.0.0-20180421082511-9ff0b2ab096e
 	github.com/satori/go.uuid v1.2.0
@@ -23,8 +22,8 @@ require (
 	github.com/spf13/pflag v1.0.5
 	github.com/tg123/go-htpasswd v1.2.1
 	github.com/vanng822/go-premailer v1.20.2
-	golang.org/x/net v0.14.0
-	golang.org/x/text v0.12.0
+	golang.org/x/net v0.15.0
+	golang.org/x/text v0.13.0
 	gopkg.in/yaml.v3 v3.0.1
 	modernc.org/sqlite v1.25.0
 )
@@ -37,7 +36,7 @@ require (
 	github.com/cznic/ql v1.2.0 // indirect
 	github.com/dustin/go-humanize v1.0.1 // indirect
 	github.com/gogs/chardet v0.0.0-20211120154057-b7413eaefb8f // indirect
-	github.com/google/uuid v1.3.0 // indirect
+	github.com/google/uuid v1.3.1 // indirect
 	github.com/gorilla/css v1.0.0 // indirect
 	github.com/inconshreveable/mousetrap v1.1.0 // indirect
 	github.com/jaytaylor/html2text v0.0.0-20230321000545-74c2419ad056 // indirect
@@ -53,18 +52,18 @@ require (
 	github.com/ssor/bom v0.0.0-20170718123548-6386211fdfcf // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/vanng822/css v1.0.1 // indirect
-	golang.org/x/crypto v0.12.0 // indirect
-	golang.org/x/image v0.11.0 // indirect
+	golang.org/x/crypto v0.13.0 // indirect
+	golang.org/x/image v0.12.0 // indirect
 	golang.org/x/mod v0.12.0 // indirect
-	golang.org/x/sys v0.11.0 // indirect
-	golang.org/x/tools v0.12.0 // indirect
+	golang.org/x/sys v0.12.0 // indirect
+	golang.org/x/tools v0.13.0 // indirect
 	gopkg.in/check.v1 v1.0.0-20190902080502-41f04d3bba15 // indirect
 	lukechampine.com/uint128 v1.3.0 // indirect
 	modernc.org/cc/v3 v3.41.0 // indirect
 	modernc.org/ccgo/v3 v3.16.15 // indirect
 	modernc.org/libc v1.24.1 // indirect
 	modernc.org/mathutil v1.6.0 // indirect
-	modernc.org/memory v1.7.0 // indirect
+	modernc.org/memory v1.7.1 // indirect
 	modernc.org/opt v0.1.3 // indirect
 	modernc.org/strutil v1.2.0 // indirect
 	modernc.org/token v1.1.0 // indirect
--- a/go.sum
+++ b/go.sum
@@ -47,16 +47,16 @@ github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+m
 github.com/edsrzf/mmap-go v0.0.0-20170320065105-0bce6a688712 h1:aaQcKT9WumO6JEJcRyTqFVq4XUZiUcKR2/GI31TOcz8=
 github.com/edsrzf/mmap-go v0.0.0-20170320065105-0bce6a688712/go.mod h1:YO35OhQPt3KJa3ryjFM5Bs14WD66h8eGKpfaBNrHW5M=
 github.com/eknkc/amber v0.0.0-20171010120322-cdade1c07385/go.mod h1:0vRUJqYpeSZifjYj7uP3BG/gKcuzL9xWVV/Y+cK33KM=
-github.com/go-test/deep v1.0.7 h1:/VSMRlnY/JSyqxQUzQLKVMAskpY/NZKFA5j2P+0pP2M=
+github.com/go-test/deep v1.1.0 h1:WOcxcdHcvdgThNXjw0t76K42FXTU7HpNQWHpA2HHNlg=
 github.com/gogs/chardet v0.0.0-20211120154057-b7413eaefb8f h1:3BSP1Tbs2djlpprl7wCLuiqMaUh5SJkkzI2gDs+FgLs=
 github.com/gogs/chardet v0.0.0-20211120154057-b7413eaefb8f/go.mod h1:Pcatq5tYkCW2Q6yrR2VRHlbHpZ/R4/7qyL1TCF7vl14=
 github.com/golang/snappy v0.0.0-20180518054509-2e65f85255db/go.mod h1:/XxbfmMg8lxefKM7IXC3fBNl/7bRcc72aCRzEWrmP2Q=
-github.com/gomarkdown/markdown v0.0.0-20230716120725-531d2d74bc12 h1:uK3X/2mt4tbSGoHvbLBHUny7CKiuwUip3MArtukol4E=
-github.com/gomarkdown/markdown v0.0.0-20230716120725-531d2d74bc12/go.mod h1:JDGcbDT52eL4fju3sZ4TeHGsQwhG9nbDV21aMyhwPoA=
+github.com/gomarkdown/markdown v0.0.0-20230922112808-5421fefb8386 h1:EcQR3gusLHN46TAD+G+EbaaqJArt5vHhNpXAa12PQf4=
+github.com/gomarkdown/markdown v0.0.0-20230922112808-5421fefb8386/go.mod h1:JDGcbDT52eL4fju3sZ4TeHGsQwhG9nbDV21aMyhwPoA=
 github.com/google/go-cmp v0.5.9 h1:O2Tfq5qg4qc4AmwVlvv0oLiVAGB7enBSJ2x2DqQFi38=
 github.com/google/pprof v0.0.0-20221118152302-e6195bd50e26 h1:Xim43kblpZXfIBQsbuBVKCudVG457BR2GZFIz3uw3hQ=
-github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I=
-github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/google/uuid v1.3.1 h1:KjJaJ9iWZ3jOFZIf1Lqf4laDRCasjl0BCmnEGxkdLb4=
+github.com/google/uuid v1.3.1/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/gopherjs/gopherjs v0.0.0-20181017120253-0766667cb4d1 h1:EGx4pi6eqNxGaHF6qqu48+N2wcFQ5qg5FXgOdqsJ5d8=
 github.com/gopherjs/gopherjs v0.0.0-20181017120253-0766667cb4d1/go.mod h1:wJfORRmW1u3UXTncJ5qlYoELFm8eSnnEO6hX4iZ3EWY=
 github.com/gorilla/css v1.0.0 h1:BQqNyPTi50JCFMTw/b67hByjMVXZRwGha6wxVGkeihY=
@@ -69,16 +69,16 @@ github.com/inconshreveable/mousetrap v1.1.0 h1:wN+x4NVGpMsO7ErUn/mUI3vEoE6Jt13X2
 github.com/inconshreveable/mousetrap v1.1.0/go.mod h1:vpF70FUmC8bwa3OWnCshd2FqLfsEA9PFc4w1p2J65bw=
 github.com/jaytaylor/html2text v0.0.0-20230321000545-74c2419ad056 h1:iCHtR9CQyktQ5+f3dMVZfwD2KWJUgm7M0gdL9NGr8KA=
 github.com/jaytaylor/html2text v0.0.0-20230321000545-74c2419ad056/go.mod h1:CVKlgaMiht+LXvHG173ujK6JUhZXKb2u/BQtjPDIvyk=
-github.com/jhillyerd/enmime v1.0.0 h1:8swYgO1fm68PllCKz5jiLzgD3axNUS388jr6BtRSsl8=
-github.com/jhillyerd/enmime v1.0.0/go.mod h1:EktNOa/V6ka9yCrfoB2uxgefp1lno6OVdszW0iQ5LnM=
+github.com/jhillyerd/enmime v1.0.1 h1:y6RyqIgBOI2hIinOXIzmeB+ITRVls0zTJIm5GwgXnjE=
+github.com/jhillyerd/enmime v1.0.1/go.mod h1:LMMbm6oTlzWHghPavqHtOrP/NosVv3l42CUrZjn03/Q=
 github.com/jtolds/gls v4.20.0+incompatible h1:xdiiI2gbIgH/gLH7ADydsJ1uDOEzR8yvV7C0MuV77Wo=
 github.com/jtolds/gls v4.20.0+incompatible/go.mod h1:QJZ7F/aHp+rZTRtaJ1ow/lLfFfVYBRgL+9YlvaHOwJU=
 github.com/k3a/html2text v1.2.1 h1:nvnKgBvBR/myqrwfLuiqecUtaK1lB9hGziIJKatNFVY=
 github.com/k3a/html2text v1.2.1/go.mod h1:ieEXykM67iT8lTvEWBh6fhpH4B23kB9OMKPdIBmgUqA=
 github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51 h1:Z9n2FFNUXsshfwJMBgNA0RU6/i7WVaAegv3PtuIHPMs=
 github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51/go.mod h1:CzGEWj7cYgsdH8dAjBGEr58BoE7ScuLd+fwFZ44+/x8=
-github.com/klauspost/compress v1.16.7 h1:2mk3MPGNzKyxErAw8YaohYh69+pa4sIQSC0fPGCFR9I=
-github.com/klauspost/compress v1.16.7/go.mod h1:ntbaceVETuRiXiv4DpjP66DpAtAGkEQskQzEyD//IeE=
+github.com/klauspost/compress v1.17.0 h1:Rnbp4K9EjcDuVuHtd0dgA4qNuv9yKDYKK1ulpJwgrqM=
+github.com/klauspost/compress v1.17.0/go.mod h1:ntbaceVETuRiXiv4DpjP66DpAtAGkEQskQzEyD//IeE=
 github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=
 github.com/kr/pretty v0.3.0 h1:WgNl7dwNpEZ6jJ9k1snq4pZsg7DOEN8hP9Xw0Tsjwk0=
 github.com/kr/pretty v0.3.0/go.mod h1:640gp4NfQd8pI5XOwp5fnNeVWj67G7CFk/SaSQn7NBk=
@@ -93,8 +93,6 @@ github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D
 github.com/mattn/go-runewidth v0.0.9/go.mod h1:H031xJmbD/WCDINGzjvQ9THkh0rPKHF+m2gUSrubnMI=
 github.com/mattn/go-runewidth v0.0.15 h1:UNAjwbU9l54TA3KzvqLGxwWjHmMgBUVhBiTjelZgg3U=
 github.com/mattn/go-runewidth v0.0.15/go.mod h1:Jdepj2loyihRzMpdS35Xk/zdY8IAYHsh153qUoGf23w=
-github.com/mattn/go-shellwords v1.0.12 h1:M2zGm7EW6UQJvDeQxo4T51eKPurbeFbe8WtebGE2xrk=
-github.com/mattn/go-shellwords v1.0.12/go.mod h1:EZzvwXDESEeg03EKmM+RmDnNOPKG4lLtQsUlTZDWQ8Y=
 github.com/mattn/go-sqlite3 v1.14.16 h1:yOQRA0RpS5PFz/oikGwBEqvAWhWg5ufRz4ETLjwpU1Y=
 github.com/mattn/go-sqlite3 v1.14.16/go.mod h1:2eHXhiwb8IkHr+BDWZGa96P6+rkvnG63S2DGjv9HUNg=
 github.com/mhale/smtpd v0.8.0 h1:5JvdsehCg33PQrZBvFyDMMUDQmvbzVpZgKob7eYBJc0=
@@ -138,8 +136,8 @@ github.com/stretchr/testify v1.6.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/
 github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
-github.com/stretchr/testify v1.8.2 h1:+h33VjcLVPDHtOdpUCuF+7gSuG3yGIftsP1YvFihtJ8=
 github.com/stretchr/testify v1.8.2/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
+github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
 github.com/tg123/go-htpasswd v1.2.1 h1:i4wfsX1KvvkyoMiHZzjS0VzbAPWfxzI8INcZAKtutoU=
 github.com/tg123/go-htpasswd v1.2.1/go.mod h1:erHp1B86KXdwQf1X5ZrLb7erXZnWueEQezb2dql4q58=
 github.com/unrolled/render v1.0.3/go.mod h1:gN9T0NhL4Bfbwu8ann7Ry/TGHYfosul+J0obPf6NBdM=
@@ -154,11 +152,11 @@ github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5t
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
 golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
-golang.org/x/crypto v0.12.0 h1:tFM/ta59kqch6LlvYnPa0yx5a83cL2nHflFhYKvv9Yk=
-golang.org/x/crypto v0.12.0/go.mod h1:NF0Gs7EO5K4qLn+Ylc+fih8BSTeIjAP05siRnAh98yw=
+golang.org/x/crypto v0.13.0 h1:mvySKfSWJ+UKUii46M40LOvyWfN0s2U+46/jDd0e6Ck=
+golang.org/x/crypto v0.13.0/go.mod h1:y6Z2r+Rw4iayiXXAIxJIDAJ1zMW4yaTpebo8fPOliYc=
 golang.org/x/image v0.0.0-20191009234506-e7c1f5e7dbb8/go.mod h1:FeLwcggjj3mMvU+oOTbSwawSJRM1uh48EjtB4UJZlP0=
-golang.org/x/image v0.11.0 h1:ds2RoQvBvYTiJkwpSFDwCcDFNX7DqjL2WsUgTNk0Ooo=
-golang.org/x/image v0.11.0/go.mod h1:bglhjqbqVuEb9e9+eNR45Jfu7D+T4Qan+NhQk8Ck2P8=
+golang.org/x/image v0.12.0 h1:w13vZbU4o5rKOFFR8y7M+c4A5jXDC0uXTdHYRP8X2DQ=
+golang.org/x/image v0.12.0/go.mod h1:Lu90jvHG7GfemOIcldsh9A2hS01ocl6oNO7ype5mEnk=
 golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
 golang.org/x/mod v0.8.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
 golang.org/x/mod v0.12.0 h1:rmsUpXtvNzj340zd98LZ4KntptpfRHwpFOHG188oHXc=
@@ -175,8 +173,8 @@ golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug
 golang.org/x/net v0.6.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
 golang.org/x/net v0.7.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
 golang.org/x/net v0.9.0/go.mod h1:d48xBJpPfHeWQsugry2m+kC02ZBRGRgulfHnEXEuWns=
-golang.org/x/net v0.14.0 h1:BONx9s002vGdD9umnlX1Po8vOZmrgH34qlHcD1MfK14=
-golang.org/x/net v0.14.0/go.mod h1:PpSgVXXLK0OxS0F31C1/tv6XNguvCrnXIDrFMspZIUI=
+golang.org/x/net v0.15.0 h1:ugBLEUaxABaB5AJqW9enI0ACdci2RUd4eP51NTBvuJ8=
+golang.org/x/net v0.15.0/go.mod h1:idbUs1IY1+zTqbi8yxTbhexhEEk5ur9LInksu6HrEpk=
 golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
@@ -193,8 +191,8 @@ golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.7.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.11.0 h1:eG7RXZHdqOJ1i+0lgLgCpSXAp6M3LYlAo6osgSi0xOM=
-golang.org/x/sys v0.11.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.12.0 h1:CM0HF96J0hcLAwsHPJZjfdNzs0gftsLfgKt57wWHJ0o=
+golang.org/x/sys v0.12.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
 golang.org/x/term v0.5.0/go.mod h1:jMB1sMXY+tzblOD4FWmEbocvup2/aLOaQEp7JmGp78k=
@@ -205,15 +203,15 @@ golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
 golang.org/x/text v0.7.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
 golang.org/x/text v0.9.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8=
-golang.org/x/text v0.12.0 h1:k+n5B8goJNdU7hSvEtMUz3d1Q6D/XW4COJSJR6fN0mc=
-golang.org/x/text v0.12.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE=
+golang.org/x/text v0.13.0 h1:ablQoSUd0tRdKxZewP80B+BaqeKJuVhuRxj/dkrun3k=
+golang.org/x/text v0.13.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 golang.org/x/tools v0.0.0-20190328211700-ab21143f2384/go.mod h1:LCzVGOaR6xXOjkQ3onu1FJEFr0SW1gC7cKk1uF8kGRs=
 golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
 golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
 golang.org/x/tools v0.6.0/go.mod h1:Xwgl3UAJ/d3gWutnCtw505GrjyAbvKui8lOU390QaIU=
-golang.org/x/tools v0.12.0 h1:YW6HUoUmYBpwSgyaGaZq1fHjrBjX1rlpZ54T6mu2kss=
-golang.org/x/tools v0.12.0/go.mod h1:Sc0INKfu04TlqNoRA1hgpFZbhYXHPr4V5DzpSBTPqQM=
+golang.org/x/tools v0.13.0 h1:Iey4qkscZuv0VvIt8E0neZjtPVQFSc870HQ448QgEmQ=
+golang.org/x/tools v0.13.0/go.mod h1:HvlwmtVNQAhOuCjW7xxvovg8wbNq7LwfXh/k7wXUl58=
 golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
@@ -235,8 +233,8 @@ modernc.org/libc v1.24.1 h1:uvJSeCKL/AgzBo2yYIPPTy82v21KgGnizcGYfBHaNuM=
 modernc.org/libc v1.24.1/go.mod h1:FmfO1RLrU3MHJfyi9eYYmZBfi/R+tqZ6+hQ3yQQUkak=
 modernc.org/mathutil v1.6.0 h1:fRe9+AmYlaej+64JsEEhoWuAYBkOtQiMEU7n/XgfYi4=
 modernc.org/mathutil v1.6.0/go.mod h1:Ui5Q9q1TR2gFm0AQRqQUaBWFLAhQpCwNcuhBOSedWPo=
-modernc.org/memory v1.7.0 h1:2pXdbgdP5hIyDp2JqIwkHNZ1sAjEbh8GnRpcqFWBf7E=
-modernc.org/memory v1.7.0/go.mod h1:NO4NVCQy0N7ln+T9ngWqOQfi7ley4vpwvARR+Hjw95E=
+modernc.org/memory v1.7.1 h1:9J+2/GKTlV503mk3yv8QJ6oEpRCUrRy0ad8TXEPoV8M=
+modernc.org/memory v1.7.1/go.mod h1:NO4NVCQy0N7ln+T9ngWqOQfi7ley4vpwvARR+Hjw95E=
 modernc.org/opt v0.1.3 h1:3XOZf2yznlhC+ibLltsDGzABUGVx8J6pnFMS3E4dcq4=
 modernc.org/opt v0.1.3/go.mod h1:WdSiB5evDcignE70guQKxYUl14mgWtbClRi5wmkkTX0=
 modernc.org/sqlite v1.25.0 h1:AFweiwPNd/b3BoKnBOfFm+Y260guGMF+0UFk0savqeA=
--- a/internal/htmlcheck/README.md
+++ b/internal/htmlcheck/README.md
--- a/internal/htmlcheck/caniemail-data.json
+++ b/internal/htmlcheck/caniemail-data.json
@@ -1,6 +1,6 @@
 {
 	"api_version":"1.0.4",
-	"last_update_date":"2023-07-25 17:42:58 +0000",
+	"last_update_date":"2023-09-22 13:57:52 +0000",
 	"nicenames":{"family":{"gmail":"Gmail","outlook":"Outlook","yahoo":"Yahoo! Mail","apple-mail":"Apple Mail","aol":"AOL","thunderbird":"Mozilla Thunderbird","microsoft":"Microsoft","samsung-email":"Samsung Email","sfr":"SFR","orange":"Orange","protonmail":"ProtonMail","hey":"HEY","mail-ru":"Mail.ru","fastmail":"Fastmail","laposte":"LaPoste.net","t-online-de":"T-online.de","free-fr":"Free.fr","gmx":"GMX","web-de":"WEB.DE","ionos-1and1":"1&1","rainloop":"RainLoop"},"platform":{"desktop-app":"Desktop","desktop-webmail":"Desktop Webmail","mobile-webmail":"Mobile Webmail","webmail":"Webmail","ios":"iOS","android":"Android","windows":"Windows","macos":"macOS","windows-mail":"Windows Mail","outlook-com":"Outlook.com"},"support":{"supported":"Supported","mitigated":"Partially supported","unsupported":"Not supported","unknown":"Support unknown","mixed":"Mixed support"},"category":{"html":"HTML","css":"CSS","image":"Image formats","others":"Others"}},
 	"data":[
 		{
@@ -318,7 +318,7 @@
 			"last_test_date":"2023-07-24",
 			"test_url":"https://www.caniemail.com/tests/css-background.html",
 			"test_results_url":"https://app.emailonacid.com/app/acidtest/04SuPXr8tEGhWRlJ2Us6dA8BzgREpyxHYEmSBeyNuWyWo/list",
-			"stats":{"apple-mail":{"macos":{"12.4":"y"},"ios":{"12.1":"y"}},"gmail":{"desktop-webmail":{"2019-02":"y","2023-07":"a #6"},"ios":{"2018-09":"a #1","2018-10":"y","2019-02":"y"},"android":{"2018-09":"a #1","2018-10":"y","2019-02":"y"},"mobile-webmail":{"2020-02":"y"}},"orange":{"desktop-webmail":{"2019-08":"y","2021-03":"y"},"ios":{"2019-08":"y"},"android":{"2019-08":"y"}},"outlook":{"windows":{"2007":"n #5","2010":"n #5","2013":"n #5","2016":"n #5","2019":"n #5"},"windows-mail":{"2019-02":"n"},"macos":{"2019-02":"y"},"outlook-com":{"2019-02":"y"},"ios":{"2019-02":"y"},"android":{"2019-02":"y"}},"yahoo":{"desktop-webmail":{"2019-02":"a #3 #4","2021-10":"a #3"},"ios":{"2019-02":"a #3 #4","2021-10":"a #3"},"android":{"2019-02":"a #3 #4","2021-10":"a #3"}},"aol":{"desktop-webmail":{"2019-02":"a #3 #4","2021-10":"a #3"},"ios":{"2019-02":"a #3 #4","2021-10":"a #3"},"android":{"2019-02":"a #3 #4","2021-10":"a #3"}},"samsung-email":{"android":{"5.0.10.2":"a #2","6.0.04.6":"y"}},"sfr":{"desktop-webmail":{"2019-08":"y"},"ios":{"2019-08":"y"},"android":{"2019-08":"y"}},"thunderbird":{"macos":{"60.5.0":"y"}},"protonmail":{"desktop-webmail":{"2020-03":"y"},"ios":{"2020-03":"y"},"android":{"2020-03":"y"}},"hey":{"desktop-webmail":{"2020-06":"y"}},"mail-ru":{"desktop-webmail":{"2020-10":"y"}},"fastmail":{"desktop-webmail":{"2021-07":"y"}},"laposte":{"desktop-webmail":{"2021-08":"y"}},"t-online-de":{"desktop-webmail":{"2021-11":"n"}},"free-fr":{"desktop-webmail":{"2021-11":"n"}},"gmx":{"desktop-webmail":{"2022-06":"a #3"},"ios":{"2022-06":"y"},"android":{"2022-06":"y"}},"web-de":{"desktop-webmail":{"2022-06":"a #3"},"ios":{"2022-06":"y"},"android":{"2022-06":"y"}},"ionos-1and1":{"desktop-webmail":{"2022-06":"y"},"android":{"2022-06":"y"}}},
+			"stats":{"apple-mail":{"macos":{"12.4":"y"},"ios":{"12.1":"y"}},"gmail":{"desktop-webmail":{"2019-02":"y","2023-07":"a #6","2023-08":"y"},"ios":{"2018-09":"a #1","2018-10":"y","2019-02":"y"},"android":{"2018-09":"a #1","2018-10":"y","2019-02":"y"},"mobile-webmail":{"2020-02":"y"}},"orange":{"desktop-webmail":{"2019-08":"y","2021-03":"y"},"ios":{"2019-08":"y"},"android":{"2019-08":"y"}},"outlook":{"windows":{"2007":"n #5","2010":"n #5","2013":"n #5","2016":"n #5","2019":"n #5"},"windows-mail":{"2019-02":"n"},"macos":{"2019-02":"y"},"outlook-com":{"2019-02":"y"},"ios":{"2019-02":"y"},"android":{"2019-02":"y"}},"yahoo":{"desktop-webmail":{"2019-02":"a #3 #4","2021-10":"a #3"},"ios":{"2019-02":"a #3 #4","2021-10":"a #3"},"android":{"2019-02":"a #3 #4","2021-10":"a #3"}},"aol":{"desktop-webmail":{"2019-02":"a #3 #4","2021-10":"a #3"},"ios":{"2019-02":"a #3 #4","2021-10":"a #3"},"android":{"2019-02":"a #3 #4","2021-10":"a #3"}},"samsung-email":{"android":{"5.0.10.2":"a #2","6.0.04.6":"y"}},"sfr":{"desktop-webmail":{"2019-08":"y"},"ios":{"2019-08":"y"},"android":{"2019-08":"y"}},"thunderbird":{"macos":{"60.5.0":"y"}},"protonmail":{"desktop-webmail":{"2020-03":"y"},"ios":{"2020-03":"y"},"android":{"2020-03":"y"}},"hey":{"desktop-webmail":{"2020-06":"y"}},"mail-ru":{"desktop-webmail":{"2020-10":"y"}},"fastmail":{"desktop-webmail":{"2021-07":"y"}},"laposte":{"desktop-webmail":{"2021-08":"y"}},"t-online-de":{"desktop-webmail":{"2021-11":"n"}},"free-fr":{"desktop-webmail":{"2021-11":"n"}},"gmx":{"desktop-webmail":{"2022-06":"a #3"},"ios":{"2022-06":"y"},"android":{"2022-06":"y"}},"web-de":{"desktop-webmail":{"2022-06":"a #3"},"ios":{"2022-06":"y"},"android":{"2022-06":"y"}},"ionos-1and1":{"desktop-webmail":{"2022-06":"y"},"android":{"2022-06":"y"}}},
 			"notes":null,
 			"notes_by_num":{"1":"Partial. Not supported with non Gmail accounts.","2":"Buggy. Requires at least one `<img>` element in the email to download all images.","3":"Partial. Does not support multiple values. The comma between two values is removed.","4":"Partial. Images URL must be between quotes.","5":"Background images can be used in VML. See [backgrounds.cm](https://backgrounds.cm/) and [VML documentation](https://docs.microsoft.com/en-us/windows/win32/vml/web-workshop---how-to-use-vml-on-web-pages-----fill--element).","6":"Partial and buggy. Removes the entire `style` attribute or `<style>` tag when a `url()` function with a valid image URL is present. See [Gmail rolling out changes that strip CSS with background images](https://freshinbox.com/blog/gmail-rolling-out-changes-that-strip-background-image-css/) and [Gmail and background images](https://parcel.io/blog/gmail-and-background-images)."}
 		},
@@ -398,7 +398,7 @@
 			"last_test_date":"2023-07-24",
 			"test_url":"https://www.caniemail.com/tests/css-background.html",
 			"test_results_url":"https://app.emailonacid.com/app/acidtest/04SuPXr8tEGhWRlJ2Us6dA8BzgREpyxHYEmSBeyNuWyWo/list",
-			"stats":{"apple-mail":{"macos":{"12.4":"y"},"ios":{"12.1":"y"}},"gmail":{"desktop-webmail":{"2019-02":"y","2023-07":"a #6 #7"},"ios":{"2019-02":"y"},"android":{"2019-02":"y"},"mobile-webmail":{"2020-02":"y"}},"orange":{"desktop-webmail":{"2019-08":"y","2021-03":"a #6"},"ios":{"2019-08":"y"},"android":{"2019-08":"y"}},"outlook":{"windows":{"2007":"a #3","2010":"a #3","2013":"a #3","2016":"a #3","2019":"a #3"},"windows-mail":{"2019-02":"n","2021-10":"a #3"},"macos":{"2019-02":"y"},"outlook-com":{"2019-02":"y"},"ios":{"2019-02":"y"},"android":{"2019-02":"y"}},"yahoo":{"desktop-webmail":{"2019-02":"a #1 #2 #4","2021-10":"a #1 #2"},"ios":{"2019-02":"a #1 #2 #4","2021-10":"a #1 #2"},"android":{"2019-02":"a #1 #2 #4","2021-10":"a #1 #2"}},"aol":{"desktop-webmail":{"2019-02":"a #1 #2 #4","2021-10":"a #1 #2"},"ios":{"2019-02":"a #1 #2 #4","2021-10":"a #1 #2"},"android":{"2019-02":"a #1 #2 #4","2021-10":"a #1 #2"}},"samsung-email":{"android":{"5.0.10.2":"y","6.0.04.6":"y"}},"sfr":{"desktop-webmail":{"2019-08":"y"},"ios":{"2019-08":"y"},"android":{"2019-08":"y"}},"thunderbird":{"macos":{"60.5.0":"y"}},"protonmail":{"desktop-webmail":{"2020-03":"y"},"ios":{"2020-03":"y"},"android":{"2020-03":"y"}},"hey":{"desktop-webmail":{"2020-06":"y"}},"mail-ru":{"desktop-webmail":{"2020-10":"y #5"}},"fastmail":{"desktop-webmail":{"2021-07":"y"}},"laposte":{"desktop-webmail":{"2021-08":"y"}},"gmx":{"desktop-webmail":{"2022-06":"a #1 #5 #6"},"ios":{"2022-06":"y"},"android":{"2022-06":"y"}},"web-de":{"desktop-webmail":{"2022-06":"a #1 #5 #6"},"ios":{"2022-06":"y"},"android":{"2022-06":"y"}},"ionos-1and1":{"desktop-webmail":{"2022-06":"y"},"android":{"2022-06":"y"}}},
+			"stats":{"apple-mail":{"macos":{"12.4":"y"},"ios":{"12.1":"y"}},"gmail":{"desktop-webmail":{"2019-02":"y","2023-07":"a #6 #7","2023-08":"y"},"ios":{"2019-02":"y"},"android":{"2019-02":"y"},"mobile-webmail":{"2020-02":"y"}},"orange":{"desktop-webmail":{"2019-08":"y","2021-03":"a #6"},"ios":{"2019-08":"y"},"android":{"2019-08":"y"}},"outlook":{"windows":{"2007":"a #3","2010":"a #3","2013":"a #3","2016":"a #3","2019":"a #3"},"windows-mail":{"2019-02":"n","2021-10":"a #3"},"macos":{"2019-02":"y"},"outlook-com":{"2019-02":"y"},"ios":{"2019-02":"y"},"android":{"2019-02":"y"}},"yahoo":{"desktop-webmail":{"2019-02":"a #1 #2 #4","2021-10":"a #1 #2"},"ios":{"2019-02":"a #1 #2 #4","2021-10":"a #1 #2"},"android":{"2019-02":"a #1 #2 #4","2021-10":"a #1 #2"}},"aol":{"desktop-webmail":{"2019-02":"a #1 #2 #4","2021-10":"a #1 #2"},"ios":{"2019-02":"a #1 #2 #4","2021-10":"a #1 #2"},"android":{"2019-02":"a #1 #2 #4","2021-10":"a #1 #2"}},"samsung-email":{"android":{"5.0.10.2":"y","6.0.04.6":"y"}},"sfr":{"desktop-webmail":{"2019-08":"y"},"ios":{"2019-08":"y"},"android":{"2019-08":"y"}},"thunderbird":{"macos":{"60.5.0":"y"}},"protonmail":{"desktop-webmail":{"2020-03":"y"},"ios":{"2020-03":"y"},"android":{"2020-03":"y"}},"hey":{"desktop-webmail":{"2020-06":"y"}},"mail-ru":{"desktop-webmail":{"2020-10":"y #5"}},"fastmail":{"desktop-webmail":{"2021-07":"y"}},"laposte":{"desktop-webmail":{"2021-08":"y"}},"gmx":{"desktop-webmail":{"2022-06":"a #1 #5 #6"},"ios":{"2022-06":"y"},"android":{"2022-06":"y"}},"web-de":{"desktop-webmail":{"2022-06":"a #1 #5 #6"},"ios":{"2022-06":"y"},"android":{"2022-06":"y"}},"ionos-1and1":{"desktop-webmail":{"2022-06":"y"},"android":{"2022-06":"y"}}},
 			"notes":null,
 			"notes_by_num":{"1":"Partial. Does not support multiple values. The comma between two values is removed.","2":"Partial. Does not support the `/ value` shorthand for `background-size`. But it can be used in the `background-size` property instead.","3":"Partial. Only `background-color` values are supported.","4":"Partial. Images URL must be between quotes.","5":"Partial. Does not support multiple values. The entire property is removed if so.","6":"Partial. Does not support the `/ value` shorthand for `background-size`.","7":"Partial and buggy. Removes the entire `style` attribute or `<style>` tag when a `url()` function with a valid image URL is present. See [Gmail rolling out changes that strip CSS with background images](https://freshinbox.com/blog/gmail-rolling-out-changes-that-strip-background-image-css/) and [Gmail and background images](https://parcel.io/blog/gmail-and-background-images)."}
 		},
@@ -1262,7 +1262,7 @@
 			"last_test_date":"2019-08-02",
 			"test_url":"https://www.caniemail.com/tests/css-width-height.html",
 			"test_results_url":"https://app.emailonacid.com/app/acidtest/dP8XNPcCLZGrogYGvFgCRRjJJO2nTWxchQ0WZSu0Pxcyb/list",
-			"stats":{"apple-mail":{"macos":{"10.3":"y"},"ios":{"5.1":"n #2","6.1":"n #2","10.3":"y","12.2":"y"}},"gmail":{"desktop-webmail":{"2019-08":"y"},"ios":{"2019-08":"y"},"android":{"2019-08":"y"},"mobile-webmail":{"2020-02":"y"}},"orange":{"desktop-webmail":{"2019-08":"y","2021-03":"y"},"ios":{"2019-08":"y"},"android":{"2019-08":"y"}},"outlook":{"windows":{"2003":"a #2","2007":"n","2010":"n","2013":"n","2016":"n","2019":"y #1"},"windows-mail":{"2020-01":"y #1"},"macos":{"2011":"y","2016":"y"},"outlook-com":{"2019-08":"y"},"ios":{"2019-08":"y"},"android":{"2019-08":"y"}},"samsung-email":{"android":{"6.0":"y"}},"sfr":{"desktop-webmail":{"2019-08":"y"},"ios":{"2019-08":"y"},"android":{"2019-08":"y"}},"thunderbird":{"macos":{"60.7":"y"}},"aol":{"desktop-webmail":{"2020-01":"y"},"ios":{"2020-01":"a #2"},"android":{"2020-01":"y"}},"yahoo":{"desktop-webmail":{"2019-08":"y"},"ios":{"2019-08":"a #2"},"android":{"2019-08":"y"}},"protonmail":{"desktop-webmail":{"2020-03":"y"},"ios":{"2020-03":"a #2"},"android":{"2020-03":"y"}},"hey":{"desktop-webmail":{"2020-06":"y"}},"mail-ru":{"desktop-webmail":{"2020-10":"y"}},"fastmail":{"desktop-webmail":{"2021-07":"y"}},"laposte":{"desktop-webmail":{"2021-08":"y"}},"gmx":{"desktop-webmail":{"2022-06":"y"},"ios":{"2022-06":"y"},"android":{"2022-06":"y"}},"web-de":{"desktop-webmail":{"2022-06":"y"},"ios":{"2022-06":"y"},"android":{"2022-06":"y"}},"ionos-1and1":{"desktop-webmail":{"2022-06":"y"},"android":{"2022-06":"y"}}},
+			"stats":{"apple-mail":{"macos":{"10.3":"y"},"ios":{"5.1":"a #2","6.1":"a #2","10.3":"y","12.2":"y"}},"gmail":{"desktop-webmail":{"2019-08":"y"},"ios":{"2019-08":"y"},"android":{"2019-08":"y"},"mobile-webmail":{"2020-02":"y"}},"orange":{"desktop-webmail":{"2019-08":"y","2021-03":"y"},"ios":{"2019-08":"y"},"android":{"2019-08":"y"}},"outlook":{"windows":{"2003":"a #2","2007":"n","2010":"n","2013":"n","2016":"n","2019":"a #1"},"windows-mail":{"2020-01":"a #1"},"macos":{"2011":"y","2016":"y"},"outlook-com":{"2019-08":"y"},"ios":{"2019-08":"y"},"android":{"2019-08":"y"}},"samsung-email":{"android":{"6.0":"y"}},"sfr":{"desktop-webmail":{"2019-08":"y"},"ios":{"2019-08":"y"},"android":{"2019-08":"y"}},"thunderbird":{"macos":{"60.7":"y"}},"aol":{"desktop-webmail":{"2020-01":"y"},"ios":{"2020-01":"a #2"},"android":{"2020-01":"y"}},"yahoo":{"desktop-webmail":{"2019-08":"y"},"ios":{"2019-08":"a #2"},"android":{"2019-08":"y"}},"protonmail":{"desktop-webmail":{"2020-03":"y"},"ios":{"2020-03":"a #2"},"android":{"2020-03":"y"}},"hey":{"desktop-webmail":{"2020-06":"y"}},"mail-ru":{"desktop-webmail":{"2020-10":"y"}},"fastmail":{"desktop-webmail":{"2021-07":"y"}},"laposte":{"desktop-webmail":{"2021-08":"y"}},"gmx":{"desktop-webmail":{"2022-06":"y"},"ios":{"2022-06":"y"},"android":{"2022-06":"y"}},"web-de":{"desktop-webmail":{"2022-06":"y"},"ios":{"2022-06":"y"},"android":{"2022-06":"y"}},"ionos-1and1":{"desktop-webmail":{"2022-06":"y"},"android":{"2022-06":"y"}}},
 			"notes":null,
 			"notes_by_num":{"1":"Partial. Only works on `<table>` elements.","2":"Partial. Doesn't work on `<table>` elements, as per [CSS 2.1 specification](https://www.w3.org/TR/CSS2/visudet.html#min-max-widths)."}
 		},
@@ -1347,6 +1347,22 @@
 			"notes_by_num":{"1":"Depends on browser support.","2":"Using this syntax for an inline style will remove all inline styles applied to that element."}
 		},
 	
+		{
+			"slug":"css-nesting",
+			"title":"CSS Nesting",
+			"description":"A syntax for nesting selectors, providing the ability to nest one style rule inside another.",
+			"url":"https://www.caniemail.com/features/css-nesting/",
+			"category":"css",
+			"tags":[],
+			"keywords":null,
+			"last_test_date":"2023-08-31",
+			"test_url":"https://www.caniemail.com/tests/css-nesting.html",
+			"test_results_url":"https://app.emailonacid.com/app/acidtest/8z9ecWkyaSHebmYl0r6dlWFfcia0VNfeKu6s01l5Fw3M0/list",
+			"stats":{"apple-mail":{"macos":{"16.0":"a #1"},"ios":{"16.6":"a #1"}},"gmail":{"desktop-webmail":{"2023-08":"n"},"ios":{"2023-08":"n"},"android":{"2023-08":"n"},"mobile-webmail":{"2023-08":"n"}},"orange":{"desktop-webmail":{"2023-08":"a #2"},"ios":{"2023-08":"a #2"},"android":{"2023-08":"u"}},"outlook":{"windows":{"2007":"n","2010":"n","2013":"n","2016":"n","2019":"n"},"windows-mail":{"2023-08":"n"},"macos":{"16.78":"a #1"},"outlook-com":{"2023-08":"n"},"ios":{"2023-08":"n"},"android":{"2023-08":"u"}},"samsung-email":{"android":{"6.0":"u"}},"sfr":{"desktop-webmail":{"2023-08":"a #1 #2"},"ios":{"2023-08":"n"},"android":{"2023-08":"u"}},"thunderbird":{"macos":{"102.15":"n"}},"aol":{"desktop-webmail":{"2023-08":"u"},"ios":{"2023-08":"u"},"android":{"2023-08":"u"}},"yahoo":{"desktop-webmail":{"2023-08":"n #3"},"ios":{"2023-08":"n #3"},"android":{"2023-08":"u"}},"protonmail":{"desktop-webmail":{"2023-08":"u"},"ios":{"2023-08":"u"},"android":{"2023-08":"u"}},"hey":{"desktop-webmail":{"2023-08":"u"}},"mail-ru":{"desktop-webmail":{"2023-08":"u"}},"fastmail":{"desktop-webmail":{"2023-08":"u"}},"laposte":{"desktop-webmail":{"2023-08":"u"}},"free-fr":{"desktop-webmail":{"2023-08":"u"}},"t-online-de":{"desktop-webmail":{"2023-08":"u"}},"gmx":{"desktop-webmail":{"2021-12":"u"},"ios":{"2021-12":"u"},"android":{"2021-12":"u"}},"web-de":{"desktop-webmail":{"2021-12":"u"},"ios":{"2021-12":"u"},"android":{"2021-12":"u"}},"ionos-1and1":{"desktop-webmail":{"2021-12":"u"},"android":{"2021-12":"u"}}},
+			"notes":null,
+			"notes_by_num":{"1":"Buggy. `E { F {}}` doesn’t work, but `E { & F {}}` does.","2":"Buggy. The syntax is supported, but nested selectors are prefixed by the webmail, which might invalidate the selector.","3":"Not supported. The nested selectors are removed, making the nest properties apply to the parent selector."}
+		},
+	
 		{
 			"slug":"css-object-fit",
 			"title":"object-fit",
@@ -1630,7 +1646,7 @@
 			"last_test_date":"2022-03-15",
 			"test_url":"https://www.caniemail.com/tests/css-has.html",
 			"test_results_url":"",
-			"stats":{"apple-mail":{"macos":{"15.0":"n","16.0":"y"},"ios":{"15.1":"n","15.4":"y"}},"gmail":{"desktop-webmail":{"2021-12":"n"},"ios":{"2021-12":"n"},"android":{"2021-12":"n"},"mobile-webmail":{"2021-12":"n"}},"orange":{"desktop-webmail":{"2021-12":"y"},"ios":{"2021-12":"n"},"android":{"2021-12":"n"}},"outlook":{"windows":{"2007":"n","2010":"n","2013":"n","2016":"n","2019":"n"},"windows-mail":{"2021-12":"n"},"macos":{"16.56":"n"},"outlook-com":{"2021-12":"n"},"ios":{"2021-12":"n"},"android":{"2021-12":"n"}},"samsung-email":{"android":{"6.0":"n"}},"sfr":{"desktop-webmail":{"2021-12":"y"},"ios":{"2021-12":"n"},"android":{"2021-12":"n"}},"thunderbird":{"macos":{"78.14":"n"}},"aol":{"desktop-webmail":{"2021-12":"n #1"},"ios":{"2021-12":"n"},"android":{"2021-12":"n"}},"yahoo":{"desktop-webmail":{"2021-12":"n #1"},"ios":{"2021-12":"n"},"android":{"2021-12":"n"}},"protonmail":{"desktop-webmail":{"2021-12":"n #2"},"ios":{"2021-12":"n"},"android":{"2021-12":"n"}},"hey":{"desktop-webmail":{"2021-12":"y"}},"mail-ru":{"desktop-webmail":{"2021-12":"n"}},"fastmail":{"desktop-webmail":{"2021-12":"n"}},"laposte":{"desktop-webmail":{"2021-12":"y"}},"gmx":{"desktop-webmail":{"2022-07":"n"},"ios":{"2022-07":"y"},"android":{"2022-07":"y"}},"web-de":{"desktop-webmail":{"2022-07":"n"},"ios":{"2022-07":"y"},"android":{"2022-07":"y"}},"ionos-1and1":{"desktop-webmail":{"2022-07":"y"},"android":{"2022-07":"y"}}},
+			"stats":{"apple-mail":{"macos":{"15.0":"n","16.0":"y"},"ios":{"15.1":"n","15.4":"y"}},"gmail":{"desktop-webmail":{"2021-12":"n","2023-09":"n"},"ios":{"2021-12":"n","2023-09":"n"},"android":{"2021-12":"n","2023-09":"n"},"mobile-webmail":{"2021-12":"n"}},"orange":{"desktop-webmail":{"2021-12":"y"},"ios":{"2021-12":"n"},"android":{"2021-12":"n"}},"outlook":{"windows":{"2007":"n","2010":"n","2013":"n","2016":"n","2019":"n"},"windows-mail":{"2021-12":"n"},"macos":{"16.56":"n","16.73":"y"},"outlook-com":{"2021-12":"n","2023-09":"n"},"ios":{"2021-12":"n","2023-09":"n"},"android":{"2021-12":"n"}},"samsung-email":{"android":{"6.0":"n","6.1.82":"y"}},"sfr":{"desktop-webmail":{"2021-12":"y"},"ios":{"2021-12":"n"},"android":{"2021-12":"n"}},"thunderbird":{"macos":{"78.14":"n","115.2":"n"}},"aol":{"desktop-webmail":{"2021-12":"n #1"},"ios":{"2021-12":"n"},"android":{"2021-12":"n"}},"yahoo":{"desktop-webmail":{"2021-12":"n #1","2023-09":"n #1"},"ios":{"2021-12":"n","2023-09":"n"},"android":{"2021-12":"n","2023-09":"n"}},"protonmail":{"desktop-webmail":{"2021-12":"n #2","2023-09":"y"},"ios":{"2021-12":"n","2023-09":"y"},"android":{"2021-12":"n","2023-09":"n"}},"hey":{"desktop-webmail":{"2021-12":"y"}},"mail-ru":{"desktop-webmail":{"2021-12":"n","2023-09":"n"}},"fastmail":{"desktop-webmail":{"2021-12":"n","2023-09":"y"}},"laposte":{"desktop-webmail":{"2021-12":"y"}},"gmx":{"desktop-webmail":{"2022-07":"n","2023-09":"n"},"ios":{"2022-07":"y"},"android":{"2022-07":"y"}},"web-de":{"desktop-webmail":{"2022-07":"n"},"ios":{"2022-07":"y"},"android":{"2022-07":"y"}},"ionos-1and1":{"desktop-webmail":{"2022-07":"y"},"android":{"2022-07":"y"}}},
 			"notes":"As of december 2021, `:has()` is only supported in [Safari Technology Preview 137](https://webkit.org/blog/12156/release-notes-for-safari-technology-preview-137/). As of march 2022, it is supported in Safari 15.4.",
 			"notes_by_num":{"1":"Not supported. `:has(…)` is replaced by `:has`.","2":"Not supported. But the pseudo-class seems interpreted and computed server side."}
 		},
@@ -2751,8 +2767,8 @@
 			"test_url":"https://www.caniemail.com/tests/css-vertical-align-html-valign.html",
 			"test_results_url":"https://app.emailonacid.com/app/acidtest/XDUBIjG7AOXLUwfUUDYDO68OO1POjklmaeeqkOeSylkJL/list",
 			"stats":{"apple-mail":{"macos":{"13":"y"},"ios":{"13":"y"}},"gmail":{"desktop-webmail":{"2020-12":"y"},"ios":{"2020-12":"y"},"android":{"2020-12":"y"},"mobile-webmail":{"2020-12":"y"}},"orange":{"desktop-webmail":{"2020-12":"y","2021-03":"y"},"ios":{"2020-12":"y"},"android":{"2020-12":"y"}},"outlook":{"windows":{"2003":"y","2007":"y","2010":"y","2013":"y","2016":"y","2019":"y"},"windows-mail":{"2020-12":"y"},"macos":{"2016":"y"},"outlook-com":{"2020-12":"y"},"ios":{"2020-12":"y"},"android":{"2020-12":"y"}},"samsung-email":{"android":{"6.0":"y"}},"sfr":{"desktop-webmail":{"2020-12":"y"},"ios":{"2020-12":"y"},"android":{"2020-12":"y"}},"thunderbird":{"macos":{"78.6":"y"}},"aol":{"desktop-webmail":{"2020-12":"y"},"ios":{"2020-12":"y"},"android":{"2020-12":"y"}},"yahoo":{"desktop-webmail":{"2020-12":"y"},"ios":{"2020-12":"y"},"android":{"2020-12":"y"}},"protonmail":{"desktop-webmail":{"2020-12":"y"},"ios":{"2020-12":"y"},"android":{"2020-12":"y"}},"hey":{"desktop-webmail":{"2020-12":"y"}},"mail-ru":{"desktop-webmail":{"2020-12":"y"}},"fastmail":{"desktop-webmail":{"2021-07":"y"}},"laposte":{"desktop-webmail":{"2021-08":"y"}},"gmx":{"desktop-webmail":{"2022-09":"y"},"ios":{"2022-09":"y"},"android":{"2022-09":"y"}},"web-de":{"desktop-webmail":{"2022-09":"y"},"ios":{"2022-09":"y"},"android":{"2022-09":"y"}},"ionos-1and1":{"desktop-webmail":{"2022-09":"y"},"android":{"2022-09":"y"}}},
-			"notes":"This is a global note.",
-			"notes_by_num":{"1":"Partial. Fixed attachment is not supported.","2":"Partial. Slash syntax values are not supported.","3":"Partial. Values containing background images are not supported.","4":"Buggy. For slash syntax values, it removes the slash character, making the value invalid.","5":"Partial. Seems to only support background colors."}
+			"notes":null,
+			"notes_by_num":null
 		},
 	
 		{
@@ -3755,10 +3771,10 @@
 			"category":"html",
 			"tags":[],
 			"keywords":null,
-			"last_test_date":"2019-06-24",
+			"last_test_date":"2023-07-27",
 			"test_url":"https://www.caniemail.com/tests/html-style.html",
 			"test_results_url":"https://app.emailonacid.com/app/acidtest/od5IYQtx8yIbIUbeRyQXnP0yzFKEm2E9CKa3FU4BcEXFv/list",
-			"stats":{"apple-mail":{"macos":{"10.3":"y","16.0":"y"},"ios":{"10.3":"y","12.3":"y","16.2":"y"}},"gmail":{"desktop-webmail":{"2019-06":"a #1","2023-01":"a #1"},"ios":{"2019-06":"a #1 #2","2023-01":"a #1 #2"},"android":{"2019-06":"a #1 #2"},"mobile-webmail":{"2020-02":"n","2023-01":"n"}},"orange":{"desktop-webmail":{"2019-06":"y","2021-03":"y","2023-02":"y"},"ios":{"2019-06":"y","2023-02":"y"},"android":{"2019-06":"n","2019-08":"y","2023-02":"y"}},"outlook":{"windows":{"2003":"y","2007":"a #4","2010":"a #4","2013":"a #4","2016":"a #4","2019":"a #4"},"windows-mail":{"2020-01":"a #4","2023-01":"a #4"},"macos":{"2011":"y","2016":"y","2019":"y","2021":"y"},"outlook-com":{"2019-06":"y","2023-01":"y"},"ios":{"2019-06":"y","2023-01":"y"},"android":{"2019-06":"y"}},"samsung-email":{"android":{"5.0.10.2":"y","6.0":"y"}},"sfr":{"desktop-webmail":{"2019-06":"y","2023-02":"y"},"ios":{"2019-06":"n","2023-02":"n"},"android":{"2019-06":"n","2023-02":"n"}},"thunderbird":{"macos":{"60.3":"y","102.7":"y"},"windows":{"102.7":"y"}},"aol":{"desktop-webmail":{"2020-01":"y","2023-01":"y"},"ios":{"2020-01":"y","2023-01":"y"},"android":{"2020-01":"y"}},"yahoo":{"desktop-webmail":{"2019-06":"y #5","2023-01":"y"},"ios":{"2019-06":"y","2023-01":"y"},"android":{"2019-06":"a #3","2023-01":"a #3"}},"protonmail":{"desktop-webmail":{"2020-03":"n","2022-02":"y","2023-01":"y"},"ios":{"2020-03":"n","2023-01":"a #1"},"android":{"2020-03":"a #1"}},"hey":{"desktop-webmail":{"2020-06":"y"}},"mail-ru":{"desktop-webmail":{"2020-09":"y"}},"fastmail":{"desktop-webmail":{"2021-07":"y"}},"laposte":{"desktop-webmail":{"2021-08":"y"},"ios":{"2023-02":"n"},"android":{"2023-02":"n"}},"gmx":{"desktop-webmail":{"2022-11":"y"},"ios":{"2022-11":"y"},"android":{"2022-11":"y"}},"web-de":{"desktop-webmail":{"2022-11":"y"},"ios":{"2022-11":"y"},"android":{"2022-11":"y"}},"ionos-1and1":{"desktop-webmail":{"2022-11":"y"},"android":{"2022-11":"y"}},"rainloop":{"desktop-webmail":{"2023-02":"n"}}},
+			"stats":{"apple-mail":{"macos":{"10.3":"y","16.0":"y"},"ios":{"10.3":"y","12.3":"y","16.2":"y"}},"gmail":{"desktop-webmail":{"2019-06":"a #1","2023-01":"a #1"},"ios":{"2019-06":"a #1 #2","2023-01":"a #1 #2"},"android":{"2019-06":"a #1 #2"},"mobile-webmail":{"2020-02":"n","2023-01":"n"}},"orange":{"desktop-webmail":{"2019-06":"y","2021-03":"y","2023-02":"y"},"ios":{"2019-06":"y","2023-02":"y"},"android":{"2019-06":"n","2019-08":"y","2023-02":"y"}},"outlook":{"windows":{"2003":"y","2007":"a #4","2010":"a #4","2013":"a #4","2016":"a #4","2019":"a #4"},"windows-mail":{"2020-01":"a #4","2023-01":"a #4"},"macos":{"2011":"y","2016":"y","2019":"y","2021":"y"},"outlook-com":{"2019-06":"y","2023-01":"y"},"ios":{"2019-06":"y","2023-01":"y"},"android":{"2019-06":"y"}},"samsung-email":{"android":{"5.0.10.2":"y","6.0":"y"}},"sfr":{"desktop-webmail":{"2019-06":"y","2023-02":"y"},"ios":{"2019-06":"n","2023-02":"n"},"android":{"2019-06":"n","2023-02":"n"}},"thunderbird":{"macos":{"60.3":"y","102.7":"y"},"windows":{"102.7":"y"}},"aol":{"desktop-webmail":{"2020-01":"y","2023-01":"y"},"ios":{"2020-01":"y","2023-01":"y"},"android":{"2020-01":"y"}},"yahoo":{"desktop-webmail":{"2019-06":"y #5","2023-01":"y"},"ios":{"2019-06":"y","2023-01":"y"},"android":{"2019-06":"a #3","2023-01":"a #3"}},"protonmail":{"desktop-webmail":{"2020-03":"n","2022-02":"y","2023-01":"y"},"ios":{"2020-03":"n","2023-01":"a #1"},"android":{"2020-03":"a #1"}},"hey":{"desktop-webmail":{"2020-06":"y"}},"mail-ru":{"desktop-webmail":{"2020-09":"y"}},"fastmail":{"desktop-webmail":{"2021-07":"y"}},"laposte":{"desktop-webmail":{"2021-08":"y"},"ios":{"2023-02":"n"},"android":{"2023-02":"n"}},"gmx":{"desktop-webmail":{"2022-11":"y","2023-07":"n"},"ios":{"2022-11":"y"},"android":{"2022-11":"y"}},"web-de":{"desktop-webmail":{"2022-11":"y"},"ios":{"2022-11":"y"},"android":{"2022-11":"y"}},"ionos-1and1":{"desktop-webmail":{"2022-11":"y"},"android":{"2022-11":"y"}},"rainloop":{"desktop-webmail":{"2023-02":"n"}}},
 			"notes":"",
 			"notes_by_num":{"1":"Partial. Not supported inside the `<body>`.","2":"Partial. Not supported with Non Gmail Accounts.","3":"Buggy. The first `<head>` in the HTML is removed, so `<style>` elements need to be in a second `<head>` element.","4":"Buggy. `<style>` elements need to be declared before their rules are used.","5":"A CSS rule following a CSS comment is ignored. (See [email-bugs#25](https://github.com/hteumeuleu/email-bugs/issues/25).)"}
 		},
--- a/internal/htmlcheck/caniemail.go
+++ b/internal/htmlcheck/caniemail.go
--- a/internal/htmlcheck/config.go
+++ b/internal/htmlcheck/config.go
--- a/internal/htmlcheck/css.go
+++ b/internal/htmlcheck/css.go
@@ -10,8 +10,8 @@ import (

 	"github.com/PuerkitoBio/goquery"
 	"github.com/axllent/mailpit/config"
-	"github.com/axllent/mailpit/utils/logger"
-	"github.com/axllent/mailpit/utils/tools"
+	"github.com/axllent/mailpit/internal/logger"
+	"github.com/axllent/mailpit/internal/tools"
 	"github.com/vanng822/go-premailer/premailer"
 	"golang.org/x/net/html"
 	"golang.org/x/net/html/atom"
--- a/internal/htmlcheck/html.go
+++ b/internal/htmlcheck/html.go
@@ -5,7 +5,7 @@ import (
 	"strings"

 	"github.com/PuerkitoBio/goquery"
-	"github.com/axllent/mailpit/utils/tools"
+	"github.com/axllent/mailpit/internal/tools"
 )

 // HTML tests
--- a/internal/htmlcheck/main.go
+++ b/internal/htmlcheck/main.go
--- a/internal/htmlcheck/platforms.go
+++ b/internal/htmlcheck/platforms.go
--- a/internal/htmlcheck/structs.go
+++ b/internal/htmlcheck/structs.go
--- a/internal/linkcheck/main.go
+++ b/internal/linkcheck/main.go
@@ -6,8 +6,8 @@ import (
 	"strings"

 	"github.com/PuerkitoBio/goquery"
-	"github.com/axllent/mailpit/storage"
-	"github.com/axllent/mailpit/utils/tools"
+	"github.com/axllent/mailpit/internal/storage"
+	"github.com/axllent/mailpit/internal/tools"
 )

 var linkRe = regexp.MustCompile(`(?m)\b(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:'!\/~+#-]*[\w@?^=%&\/~+#-])`)
--- a/internal/linkcheck/status.go
+++ b/internal/linkcheck/status.go
@@ -7,7 +7,7 @@ import (
 	"time"

 	"github.com/axllent/mailpit/config"
-	"github.com/axllent/mailpit/utils/logger"
+	"github.com/axllent/mailpit/internal/logger"
 )

 func getHTTPStatuses(links []string, followRedirects bool) []Link {
--- a/internal/linkcheck/structs.go
+++ b/internal/linkcheck/structs.go
--- a/internal/logger/logger.go
+++ b/internal/logger/logger.go
--- a/internal/storage/database.go
+++ b/internal/storage/database.go
@@ -20,12 +20,11 @@ import (

 	"github.com/GuiaBolso/darwin"
 	"github.com/axllent/mailpit/config"
+	"github.com/axllent/mailpit/internal/logger"
 	"github.com/axllent/mailpit/server/websockets"
-	"github.com/axllent/mailpit/utils/logger"
 	"github.com/jhillyerd/enmime"
 	"github.com/klauspost/compress/zstd"
 	"github.com/leporo/sqlf"
-	"github.com/mattn/go-shellwords"
 	uuid "github.com/satori/go.uuid"

 	// sqlite (native) - https://gitlab.com/cznic/sqlite
@@ -204,7 +203,8 @@ func Close() {
 	}
 }

-// Store will save an email to the database tables
+// Store will save an email to the database tables.
+// Returns the database ID of the saved message.
 func Store(body []byte) (string, error) {
 	// Parse message body with enmime
 	env, err := enmime.ReadEnvelope(bytes.NewReader(body))
@@ -317,6 +317,8 @@ func Store(body []byte) (string, error) {

 	dbLastAction = time.Now()

+	BroadcastMailboxStats()
+
 	return id, nil
 }

@@ -367,9 +369,6 @@ func List(start, limit int) ([]MessageSummary, error) {
 		em.Read = read == 1

 		results = append(results, em)
-
-		// logger.PrettyPrint(em)
-
 	}); err != nil {
 		return results, err
 	}
@@ -379,96 +378,6 @@ func List(start, limit int) ([]MessageSummary, error) {
 	return results, nil
 }

-// Search will search a mailbox for search terms.
-// The search is broken up by segments (exact phrases can be quoted), and interprets specific terms such as:
-// is:read, is:unread, has:attachment, to:<term>, from:<term> & subject:<term>
-// Negative searches also also included by prefixing the search term with a `-` or `!`
-func Search(search string, start, limit int) ([]MessageSummary, int, error) {
-	results := []MessageSummary{}
-	allResults := []MessageSummary{}
-	tsStart := time.Now()
-	nrResults := 0
-	if limit < 0 {
-		limit = 50
-	}
-
-	s := strings.ToLower(search)
-	// add another quote if missing closing quote
-	quotes := strings.Count(s, `"`)
-	if quotes%2 != 0 {
-		s += `"`
-	}
-
-	p := shellwords.NewParser()
-	args, err := p.Parse(s)
-	if err != nil {
-		return results, nrResults, errors.New("Your search contains invalid characters")
-	}
-
-	// generate the SQL based on arguments
-	q := searchParser(args)
-
-	if err := q.QueryAndClose(nil, db, func(row *sql.Rows) {
-		var created int64
-		var id string
-		var messageID string
-		var subject string
-		var metadata string
-		var size int
-		var attachments int
-		var tags string
-		var read int
-		var ignore string
-		em := MessageSummary{}
-
-		if err := row.Scan(&created, &id, &messageID, &subject, &metadata, &size, &attachments, &read, &tags, &ignore, &ignore, &ignore, &ignore); err != nil {
-			logger.Log().Error(err)
-			return
-		}
-
-		if err := json.Unmarshal([]byte(metadata), &em); err != nil {
-			logger.Log().Error(err)
-			return
-		}
-
-		if err := json.Unmarshal([]byte(tags), &em.Tags); err != nil {
-			logger.Log().Error(err)
-			return
-		}
-
-		em.Created = time.UnixMilli(created)
-		em.ID = id
-		em.MessageID = messageID
-		em.Subject = subject
-		em.Size = size
-		em.Attachments = attachments
-		em.Read = read == 1
-
-		allResults = append(allResults, em)
-	}); err != nil {
-		return results, nrResults, err
-	}
-
-	dbLastAction = time.Now()
-
-	nrResults = len(allResults)
-
-	if nrResults > start {
-		end := nrResults
-		if nrResults >= start+limit {
-			end = start + limit
-		}
-
-		results = allResults[start:end]
-	}
-
-	elapsed := time.Since(tsStart)
-
-	logger.Log().Debugf("[db] search for \"%s\" in %s", search, elapsed)
-
-	return results, nrResults, err
-}
-
 // GetMessage returns a Message generated from the mailbox_data collection.
 // If the message lacks a date header, then the received datetime is used.
 func GetMessage(id string) (*Message, error) {
@@ -525,7 +434,6 @@ func GetMessage(id string) (*Message, error) {
 	obj := Message{
 		ID:         id,
 		MessageID:  messageID,
-		Read:       true,
 		From:       from,
 		Date:       date,
 		To:         addressToSlice(env, "To"),
@@ -651,6 +559,8 @@ func MarkRead(id string) error {
 		logger.Log().Debugf("[db] marked message %s as read", id)
 	}

+	BroadcastMailboxStats()
+
 	return err
 }

@@ -672,6 +582,8 @@ func MarkAllRead() error {
 	elapsed := time.Since(start)
 	logger.Log().Debugf("[db] marked %d messages as read in %s", total, elapsed)

+	BroadcastMailboxStats()
+
 	dbLastAction = time.Now()

 	return nil
@@ -695,6 +607,8 @@ func MarkAllUnread() error {
 	elapsed := time.Since(start)
 	logger.Log().Debugf("[db] marked %d messages as unread in %s", total, elapsed)

+	BroadcastMailboxStats()
+
 	dbLastAction = time.Now()

 	return nil
@@ -717,6 +631,8 @@ func MarkUnread(id string) error {

 	dbLastAction = time.Now()

+	BroadcastMailboxStats()
+
 	return err
 }

@@ -751,6 +667,8 @@ func DeleteOneMessage(id string) error {
 	dbLastAction = time.Now()
 	dbDataDeleted = true

+	BroadcastMailboxStats()
+
 	return err
 }

@@ -799,19 +717,13 @@ func DeleteAllMessages() error {
 	dbDataDeleted = false

 	websockets.Broadcast("prune", nil)
+	BroadcastMailboxStats()

 	return err
 }

-// StatsGet returns the total/unread statistics for a mailbox
-func StatsGet() MailboxStats {
-	var (
-		total  = CountTotal()
-		unread = CountUnread()
-	)
-
-	dbLastAction = time.Now()
-
+// GetAllTags returns all used tags
+func GetAllTags() []string {
 	q := sqlf.From("mailbox").
 		Select(`DISTINCT Tags`).
 		Where("Tags != ?", "[]")
@@ -844,6 +756,19 @@ func StatsGet() MailboxStats {

 	sort.Strings(tags)

+	return tags
+}
+
+// StatsGet returns the total/unread statistics for a mailbox
+func StatsGet() MailboxStats {
+	var (
+		total  = CountTotal()
+		unread = CountUnread()
+		tags   = GetAllTags()
+	)
+
+	dbLastAction = time.Now()
+
 	return MailboxStats{
 		Total:  total,
 		Unread: unread,
--- a/internal/storage/database_test.go
+++ b/internal/storage/database_test.go
@@ -0,0 +1,143 @@
+package storage
+
+import (
+	"testing"
+	"time"
+)
+
+func TestTextEmailInserts(t *testing.T) {
+	setup()
+	defer Close()
+
+	t.Log("Testing text email storage")
+
+	start := time.Now()
+
+	assertEqualStats(t, 0, 0)
+
+	for i := 0; i < testRuns; i++ {
+		if _, err := Store(testTextEmail); err != nil {
+			t.Log("error ", err)
+			t.Fail()
+		}
+	}
+
+	assertEqual(t, CountTotal(), testRuns, "Incorrect number of text emails stored")
+
+	t.Logf("Inserted %d text emails in %s", testRuns, time.Since(start))
+
+	assertEqualStats(t, testRuns, testRuns)
+
+	delStart := time.Now()
+	if err := DeleteAllMessages(); err != nil {
+		t.Log("error ", err)
+		t.Fail()
+	}
+
+	assertEqual(t, CountTotal(), 0, "incorrect number of text emails deleted")
+
+	t.Logf("deleted %d text emails in %s", testRuns, time.Since(delStart))
+
+	assertEqualStats(t, 0, 0)
+}
+
+func TestMimeEmailInserts(t *testing.T) {
+	setup()
+	defer Close()
+
+	t.Log("Testing mime email storage")
+
+	start := time.Now()
+
+	for i := 0; i < testRuns; i++ {
+		if _, err := Store(testMimeEmail); err != nil {
+			t.Log("error ", err)
+			t.Fail()
+		}
+	}
+
+	assertEqual(t, CountTotal(), testRuns, "Incorrect number of mime emails stored")
+
+	t.Logf("Inserted %d text emails in %s", testRuns, time.Since(start))
+
+	assertEqualStats(t, testRuns, testRuns)
+
+	delStart := time.Now()
+	if err := DeleteAllMessages(); err != nil {
+		t.Log("error ", err)
+		t.Fail()
+	}
+
+	assertEqual(t, CountTotal(), 0, "incorrect number of mime emails deleted")
+
+	t.Logf("Deleted %d mime emails in %s", testRuns, time.Since(delStart))
+}
+
+func TestRetrieveMimeEmail(t *testing.T) {
+	setup()
+	defer Close()
+
+	t.Log("Testing mime email retrieval")
+
+	id, err := Store(testMimeEmail)
+	if err != nil {
+		t.Log("error ", err)
+		t.Fail()
+	}
+
+	msg, err := GetMessage(id)
+	if err != nil {
+		t.Log("error ", err)
+		t.Fail()
+	}
+
+	assertEqual(t, msg.From.Name, "Sender Smith", "\"From\" name does not match")
+	assertEqual(t, msg.From.Address, "sender2@example.com", "\"From\" address does not match")
+	assertEqual(t, msg.Subject, "inline + attachment", "subject does not match")
+	assertEqual(t, len(msg.To), 1, "incorrect number of recipients")
+	assertEqual(t, msg.To[0].Name, "Recipient Ross", "\"To\" name does not match")
+	assertEqual(t, msg.To[0].Address, "recipient2@example.com", "\"To\" address does not match")
+	assertEqual(t, len(msg.Attachments), 1, "incorrect number of attachments")
+	assertEqual(t, msg.Attachments[0].FileName, "Sample PDF.pdf", "attachment filename does not match")
+	assertEqual(t, len(msg.Inline), 1, "incorrect number of inline attachments")
+	assertEqual(t, msg.Inline[0].FileName, "inline-image.jpg", "inline attachment filename does not match")
+
+	attachmentData, err := GetAttachmentPart(id, msg.Attachments[0].PartID)
+	if err != nil {
+		t.Log("error ", err)
+		t.Fail()
+	}
+	assertEqual(t, len(attachmentData.Content), msg.Attachments[0].Size, "attachment size does not match")
+
+	inlineData, err := GetAttachmentPart(id, msg.Inline[0].PartID)
+	if err != nil {
+		t.Log("error ", err)
+		t.Fail()
+	}
+	assertEqual(t, len(inlineData.Content), msg.Inline[0].Size, "inline attachment size does not match")
+}
+
+func BenchmarkImportText(b *testing.B) {
+	setup()
+	defer Close()
+
+	for i := 0; i < b.N; i++ {
+		if _, err := Store(testTextEmail); err != nil {
+			b.Log("error ", err)
+			b.Fail()
+		}
+	}
+}
+
+func BenchmarkImportMime(b *testing.B) {
+	setup()
+	defer Close()
+
+	for i := 0; i < b.N; i++ {
+		if _, err := Store(testMimeEmail); err != nil {
+			b.Log("error ", err)
+			b.Fail()
+		}
+	}
+
+}
--- a/internal/storage/migrationTasks.go
+++ b/internal/storage/migrationTasks.go
@@ -8,7 +8,7 @@ import (
 	"time"

 	"github.com/axllent/mailpit/config"
-	"github.com/axllent/mailpit/utils/logger"
+	"github.com/axllent/mailpit/internal/logger"
 	"github.com/jhillyerd/enmime"
 	"github.com/leporo/sqlf"
 	"golang.org/x/text/language"
--- a/internal/storage/notifications.go
+++ b/internal/storage/notifications.go
@@ -0,0 +1,35 @@
+package storage
+
+import (
+	"time"
+
+	"github.com/axllent/mailpit/server/websockets"
+)
+
+var bcStatsDelay = false
+
+// BroadcastMailboxStats broadcasts the total number of messages
+// displayed to the web UI, as well as the total unread messages.
+// The lookup is very fast (< 10ms / 100k messages under load).
+// Rate limited to 4x per second.
+func BroadcastMailboxStats() {
+	if bcStatsDelay {
+		return
+	}
+
+	bcStatsDelay = true
+
+	go func() {
+		time.Sleep(250 * time.Millisecond)
+		bcStatsDelay = false
+		b := struct {
+			Total  int
+			Unread int
+		}{
+			Total:  CountTotal(),
+			Unread: CountUnread(),
+		}
+
+		websockets.Broadcast("stats", b)
+	}()
+}
--- a/internal/storage/search.go
+++ b/internal/storage/search.go
@@ -0,0 +1,318 @@
+package storage
+
+import (
+	"context"
+	"database/sql"
+	"encoding/json"
+	"regexp"
+	"strings"
+	"time"
+
+	"github.com/axllent/mailpit/internal/logger"
+	"github.com/axllent/mailpit/internal/tools"
+	"github.com/leporo/sqlf"
+)
+
+// Search will search a mailbox for search terms.
+// The search is broken up by segments (exact phrases can be quoted), and interprets specific terms such as:
+// is:read, is:unread, has:attachment, to:<term>, from:<term> & subject:<term>
+// Negative searches also also included by prefixing the search term with a `-` or `!`
+func Search(search string, start, limit int) ([]MessageSummary, int, error) {
+	results := []MessageSummary{}
+	allResults := []MessageSummary{}
+	tsStart := time.Now()
+	nrResults := 0
+	if limit < 0 {
+		limit = 50
+	}
+
+	q := searchQueryBuilder(search)
+	var err error
+
+	if err := q.QueryAndClose(nil, db, func(row *sql.Rows) {
+		var created int64
+		var id string
+		var messageID string
+		var subject string
+		var metadata string
+		var size int
+		var attachments int
+		var tags string
+		var read int
+		var ignore string
+		em := MessageSummary{}
+
+		if err := row.Scan(&created, &id, &messageID, &subject, &metadata, &size, &attachments, &read, &tags, &ignore, &ignore, &ignore, &ignore); err != nil {
+			logger.Log().Error(err)
+			return
+		}
+
+		if err := json.Unmarshal([]byte(metadata), &em); err != nil {
+			logger.Log().Error(err)
+			return
+		}
+
+		if err := json.Unmarshal([]byte(tags), &em.Tags); err != nil {
+			logger.Log().Error(err)
+			return
+		}
+
+		em.Created = time.UnixMilli(created)
+		em.ID = id
+		em.MessageID = messageID
+		em.Subject = subject
+		em.Size = size
+		em.Attachments = attachments
+		em.Read = read == 1
+
+		allResults = append(allResults, em)
+	}); err != nil {
+		return results, nrResults, err
+	}
+
+	dbLastAction = time.Now()
+
+	nrResults = len(allResults)
+
+	if nrResults > start {
+		end := nrResults
+		if nrResults >= start+limit {
+			end = start + limit
+		}
+
+		results = allResults[start:end]
+	}
+
+	elapsed := time.Since(tsStart)
+
+	logger.Log().Debugf("[db] search for \"%s\" in %s", search, elapsed)
+
+	return results, nrResults, err
+}
+
+// DeleteSearch will delete all messages for search terms.
+// The search is broken up by segments (exact phrases can be quoted), and interprets specific terms such as:
+// is:read, is:unread, has:attachment, to:<term>, from:<term> & subject:<term>
+// Negative searches also also included by prefixing the search term with a `-` or `!`
+func DeleteSearch(search string) error {
+	q := searchQueryBuilder(search)
+
+	ids := []string{}
+
+	if err := q.QueryAndClose(nil, db, func(row *sql.Rows) {
+		var created int64
+		var id string
+		var messageID string
+		var subject string
+		var metadata string
+		var size int
+		var attachments int
+		var tags string
+		var read int
+		var ignore string
+
+		if err := row.Scan(&created, &id, &messageID, &subject, &metadata, &size, &attachments, &read, &tags, &ignore, &ignore, &ignore, &ignore); err != nil {
+			logger.Log().Error(err)
+			return
+		}
+
+		ids = append(ids, id)
+	}); err != nil {
+		return err
+	}
+
+	if len(ids) > 0 {
+		total := len(ids)
+
+		// split ids into chunks of 1000 ids
+		var chunks [][]string
+		if total > 1000 {
+			chunkSize := 1000
+			chunks = make([][]string, 0, (len(ids)+chunkSize-1)/chunkSize)
+			for chunkSize < len(ids) {
+				ids, chunks = ids[chunkSize:], append(chunks, ids[0:chunkSize:chunkSize])
+			}
+			if len(ids) > 0 {
+				// add remaining ids <= 1000
+				chunks = append(chunks, ids)
+			}
+		} else {
+			chunks = append(chunks, ids)
+		}
+
+		// begin a transaction to ensure both the message
+		// and data are deleted successfully
+		tx, err := db.BeginTx(context.Background(), nil)
+		if err != nil {
+			return err
+		}
+
+		// roll back if it fails
+		defer tx.Rollback()
+
+		for _, ids := range chunks {
+			delIDs := make([]interface{}, len(ids))
+			for i, id := range ids {
+				delIDs[i] = id
+			}
+
+			sqlDelete1 := `DELETE FROM mailbox WHERE ID IN (?` + strings.Repeat(",?", len(ids)-1) + `)`
+
+			_, err = tx.Exec(sqlDelete1, delIDs...)
+			if err != nil {
+				return err
+			}
+
+			sqlDelete2 := `DELETE FROM mailbox_data WHERE ID IN (?` + strings.Repeat(",?", len(ids)-1) + `)`
+
+			_, err = tx.Exec(sqlDelete2, delIDs...)
+			if err != nil {
+				return err
+			}
+		}
+
+		err = tx.Commit()
+
+		if err == nil {
+			logger.Log().Debugf("[db] deleted %d messages matching %s", total, search)
+		}
+
+		dbLastAction = time.Now()
+		dbDataDeleted = true
+
+		BroadcastMailboxStats()
+	}
+
+	return nil
+}
+
+// SearchParser returns the SQL syntax for the database search based on the search arguments
+func searchQueryBuilder(searchString string) *sqlf.Stmt {
+	searchString = strings.ToLower(searchString)
+	// group strings with quotes as a single argument and remove quotes
+	args := tools.ArgsParser(searchString)
+
+	q := sqlf.From("mailbox").
+		Select(`Created, ID, MessageID, Subject, Metadata, Size, Attachments, Read, Tags,
+			IFNULL(json_extract(Metadata, '$.To'), '{}') as ToJSON,
+			IFNULL(json_extract(Metadata, '$.From'), '{}') as FromJSON,
+			IFNULL(json_extract(Metadata, '$.Cc'), '{}') as CcJSON,
+			IFNULL(json_extract(Metadata, '$.Bcc'), '{}') as BccJSON
+		`).OrderBy("Created DESC")
+
+	for _, w := range args {
+		if cleanString(w) == "" {
+			continue
+		}
+
+		exclude := false
+		// search terms starting with a `-` or `!` imply an exclude
+		if len(w) > 1 && (strings.HasPrefix(w, "-") || strings.HasPrefix(w, "!")) {
+			exclude = true
+			w = w[1:]
+		}
+
+		re := regexp.MustCompile(`[a-zA-Z0-9]+`)
+		if !re.MatchString(w) {
+			continue
+		}
+
+		if strings.HasPrefix(w, "to:") {
+			w = cleanString(w[3:])
+			if w != "" {
+				if exclude {
+					q.Where("ToJSON NOT LIKE ?", "%"+escPercentChar(w)+"%")
+				} else {
+					q.Where("ToJSON LIKE ?", "%"+escPercentChar(w)+"%")
+				}
+			}
+		} else if strings.HasPrefix(w, "from:") {
+			w = cleanString(w[5:])
+			if w != "" {
+				if exclude {
+					q.Where("FromJSON NOT LIKE ?", "%"+escPercentChar(w)+"%")
+				} else {
+					q.Where("FromJSON LIKE ?", "%"+escPercentChar(w)+"%")
+				}
+			}
+		} else if strings.HasPrefix(w, "cc:") {
+			w = cleanString(w[3:])
+			if w != "" {
+				if exclude {
+					q.Where("CcJSON NOT LIKE ?", "%"+escPercentChar(w)+"%")
+				} else {
+					q.Where("CcJSON LIKE ?", "%"+escPercentChar(w)+"%")
+				}
+			}
+		} else if strings.HasPrefix(w, "bcc:") {
+			w = cleanString(w[4:])
+			if w != "" {
+				if exclude {
+					q.Where("BccJSON NOT LIKE ?", "%"+escPercentChar(w)+"%")
+				} else {
+					q.Where("BccJSON LIKE ?", "%"+escPercentChar(w)+"%")
+				}
+			}
+		} else if strings.HasPrefix(w, "subject:") {
+			w = w[8:]
+			if w != "" {
+				if exclude {
+					q.Where("Subject NOT LIKE ?", "%"+escPercentChar(w)+"%")
+				} else {
+					q.Where("Subject LIKE ?", "%"+escPercentChar(w)+"%")
+				}
+			}
+		} else if strings.HasPrefix(w, "message-id:") {
+			w = cleanString(w[11:])
+			if w != "" {
+				if exclude {
+					q.Where("MessageID NOT LIKE ?", "%"+escPercentChar(w)+"%")
+				} else {
+					q.Where("MessageID LIKE ?", "%"+escPercentChar(w)+"%")
+				}
+			}
+		} else if strings.HasPrefix(w, "tag:") {
+			w = cleanString(w[4:])
+			if w != "" {
+				if exclude {
+					q.Where("Tags NOT LIKE ?", "%\""+escPercentChar(w)+"\"%")
+				} else {
+					q.Where("Tags LIKE ?", "%\""+escPercentChar(w)+"\"%")
+				}
+			}
+		} else if w == "is:read" {
+			if exclude {
+				q.Where("Read = 0")
+			} else {
+				q.Where("Read = 1")
+			}
+		} else if w == "is:unread" {
+			if exclude {
+				q.Where("Read = 1")
+			} else {
+				q.Where("Read = 0")
+			}
+		} else if w == "is:tagged" {
+			if exclude {
+				q.Where("Tags = ?", "[]")
+			} else {
+				q.Where("Tags != ?", "[]")
+			}
+		} else if w == "has:attachment" || w == "has:attachments" {
+			if exclude {
+				q.Where("Attachments = 0")
+			} else {
+				q.Where("Attachments > 0")
+			}
+		} else {
+			// search text
+			if exclude {
+				q.Where("SearchText NOT LIKE ?", "%"+cleanString(escPercentChar(w))+"%")
+			} else {
+				q.Where("SearchText LIKE ?", "%"+cleanString(escPercentChar(w))+"%")
+			}
+		}
+	}
+
+	return q
+}
--- a/internal/storage/search_test.go
+++ b/internal/storage/search_test.go
@@ -0,0 +1,152 @@
+package storage
+
+import (
+	"bytes"
+	"fmt"
+	"math/rand"
+	"testing"
+
+	"github.com/jhillyerd/enmime"
+)
+
+func TestSearch(t *testing.T) {
+	setup()
+	defer Close()
+
+	t.Log("Testing search")
+	for i := 0; i < testRuns; i++ {
+		msg := enmime.Builder().
+			From(fmt.Sprintf("From %d", i), fmt.Sprintf("from-%d@example.com", i)).
+			Subject(fmt.Sprintf("Subject line %d end", i)).
+			Text([]byte(fmt.Sprintf("This is the email body %d <jdsauk;dwqmdqw;>.", i))).
+			To(fmt.Sprintf("To %d", i), fmt.Sprintf("to-%d@example.com", i))
+
+		env, err := msg.Build()
+		if err != nil {
+			t.Log("error ", err)
+			t.Fail()
+		}
+
+		buf := new(bytes.Buffer)
+
+		if err := env.Encode(buf); err != nil {
+			t.Log("error ", err)
+			t.Fail()
+		}
+
+		if _, err := Store(buf.Bytes()); err != nil {
+			t.Log("error ", err)
+			t.Fail()
+		}
+	}
+
+	for i := 1; i < 51; i++ {
+		// search a random something that will return a single result
+		searchIdx := rand.Intn(4) + 1
+		var search string
+		switch searchIdx {
+		case 1:
+			search = fmt.Sprintf("from-%d@example.com", i)
+		case 2:
+			search = fmt.Sprintf("to-%d@example.com", i)
+		case 3:
+			search = fmt.Sprintf("\"Subject line %d end\"", i)
+		default:
+			search = fmt.Sprintf("\"the email body %d jdsauk dwqmdqw\"", i)
+		}
+
+		summaries, _, err := Search(search, 0, 100)
+		if err != nil {
+			t.Log("error ", err)
+			t.Fail()
+		}
+
+		assertEqual(t, len(summaries), 1, "1 search result expected")
+
+		assertEqual(t, summaries[0].From.Name, fmt.Sprintf("From %d", i), "\"From\" name does not match")
+		assertEqual(t, summaries[0].From.Address, fmt.Sprintf("from-%d@example.com", i), "\"From\" address does not match")
+		assertEqual(t, summaries[0].To[0].Name, fmt.Sprintf("To %d", i), "\"To\" name does not match")
+		assertEqual(t, summaries[0].To[0].Address, fmt.Sprintf("to-%d@example.com", i), "\"To\" address does not match")
+		assertEqual(t, summaries[0].Subject, fmt.Sprintf("Subject line %d end", i), "\"Subject\" does not match")
+	}
+
+	// search something that will return 200 results
+	summaries, _, err := Search("This is the email body", 0, testRuns)
+	if err != nil {
+		t.Log("error ", err)
+		t.Fail()
+	}
+	assertEqual(t, len(summaries), testRuns, "search results expected")
+}
+
+func TestSearchDelete100(t *testing.T) {
+	setup()
+	defer Close()
+
+	t.Log("Testing search delete of 100 messages")
+	for i := 0; i < 100; i++ {
+		if _, err := Store(testTextEmail); err != nil {
+			t.Log("error ", err)
+			t.Fail()
+		}
+		if _, err := Store(testMimeEmail); err != nil {
+			t.Log("error ", err)
+			t.Fail()
+		}
+	}
+
+	_, total, err := Search("from:sender@example.com", 0, 100)
+	if err != nil {
+		t.Log("error ", err)
+		t.Fail()
+	}
+
+	assertEqual(t, total, 100, "100 search results expected")
+
+	if err := DeleteSearch("from:sender@example.com"); err != nil {
+		t.Log("error ", err)
+		t.Fail()
+	}
+
+	_, total, err = Search("from:sender@example.com", 0, 100)
+	if err != nil {
+		t.Log("error ", err)
+		t.Fail()
+	}
+
+	assertEqual(t, total, 0, "0 search results expected")
+}
+
+func TestSearchDelete1100(t *testing.T) {
+	setup()
+	defer Close()
+
+	t.Log("Testing search delete of 1100 messages")
+	for i := 0; i < 1100; i++ {
+		if _, err := Store(testTextEmail); err != nil {
+			t.Log("error ", err)
+			t.Fail()
+		}
+	}
+
+	_, total, err := Search("from:sender@example.com", 0, 100)
+	if err != nil {
+		t.Log("error ", err)
+		t.Fail()
+	}
+
+	assertEqual(t, total, 1100, "100 search results expected")
+
+	if err := DeleteSearch("from:sender@example.com"); err != nil {
+		t.Log("error ", err)
+		t.Fail()
+	}
+
+	_, total, err = Search("from:sender@example.com", 0, 100)
+	if err != nil {
+		t.Log("error ", err)
+		t.Fail()
+	}
+
+	assertEqual(t, total, 0, "0 search results expected")
+}
--- a/internal/storage/structs.go
+++ b/internal/storage/structs.go
@@ -15,8 +15,6 @@ type Message struct {
 	ID string
 	// Message ID
 	MessageID string
-	// Read status
-	Read bool
 	// From address
 	From *mail.Address
 	// To addresses
--- a/internal/storage/tags.go
+++ b/internal/storage/tags.go
@@ -7,8 +7,8 @@ import (
 	"strings"

 	"github.com/axllent/mailpit/config"
-	"github.com/axllent/mailpit/utils/logger"
-	"github.com/axllent/mailpit/utils/tools"
+	"github.com/axllent/mailpit/internal/logger"
+	"github.com/axllent/mailpit/internal/tools"
 	"github.com/leporo/sqlf"
 )

--- a/internal/storage/tags_test.go
+++ b/internal/storage/tags_test.go
@@ -0,0 +1,43 @@
+package storage
+
+import (
+	"fmt"
+	"testing"
+)
+
+func TestTags(t *testing.T) {
+	setup()
+	defer Close()
+
+	t.Log("Testing tags")
+
+	ids := []string{}
+
+	for i := 0; i < 10; i++ {
+		id, err := Store(testMimeEmail)
+		if err != nil {
+			t.Log("error ", err)
+			t.Fail()
+		}
+		ids = append(ids, id)
+	}
+
+	for i := 0; i < 10; i++ {
+		if err := SetTags(ids[i], []string{fmt.Sprintf("Tag-%d", i)}); err != nil {
+			t.Log("error ", err)
+			t.Fail()
+		}
+	}
+
+	for i := 0; i < 10; i++ {
+		message, err := GetMessage(ids[i])
+		if err != nil {
+			t.Log("error ", err)
+			t.Fail()
+		}
+
+		if len(message.Tags) != 1 || message.Tags[0] != fmt.Sprintf("Tag-%d", i) {
+			t.Fatal("Message tags do not match")
+		}
+	}
+}
--- a/internal/storage/test_shared.go
+++ b/internal/storage/test_shared.go
@@ -0,0 +1,57 @@
+package storage
+
+import (
+	"fmt"
+	"os"
+	"testing"
+
+	"github.com/axllent/mailpit/config"
+	"github.com/axllent/mailpit/internal/logger"
+)
+
+var (
+	testTextEmail []byte
+	testMimeEmail []byte
+	testRuns      = 100
+)
+
+func setup() {
+	logger.NoLogging = true
+	config.MaxMessages = 0
+	config.DataFile = ""
+
+	if err := InitDB(); err != nil {
+		panic(err)
+	}
+
+	var err error
+
+	testTextEmail, err = os.ReadFile("testdata/plain-text.eml")
+	if err != nil {
+		panic(err)
+	}
+
+	testMimeEmail, err = os.ReadFile("testdata/mime-attachment.eml")
+	if err != nil {
+		panic(err)
+	}
+}
+
+func assertEqual(t *testing.T, a interface{}, b interface{}, message string) {
+	if a == b {
+		return
+	}
+	message = fmt.Sprintf("%s: \"%v\" != \"%v\"", message, a, b)
+	t.Fatal(message)
+}
+
+func assertEqualStats(t *testing.T, total int, unread int) {
+	s := StatsGet()
+	if total != s.Total {
+		t.Fatalf("Incorrect total mailbox stats: \"%d\" != \"%d\"", total, s.Total)
+	}
+
+	if unread != s.Unread {
+		t.Fatalf("Incorrect unread mailbox stats: \"%d\" != \"%d\"", unread, s.Unread)
+	}
+}
--- a/internal/storage/testdata/mime-attachment.eml
+++ b/internal/storage/testdata/mime-attachment.eml
@@ -1,4 +1,4 @@
-Delivered-To: recipient@example.com
+Delivered-To: recipient2@example.com
 Received: by 2002:a0c:fe87:0:0:0:0:0 with SMTP id d7csp145570qvs;
        Tue, 26 Jul 2022 20:42:36 -0700 (PDT)
 X-Received: by 2002:a17:902:f788:b0:16c:f48b:905e with SMTP id q8-20020a170902f78800b0016cf48b905emr19885972pln.60.1658893355881;
@@ -23,18 +23,18 @@ ARC-Message-Signature: i=1; a=rsa-sha256; c=relaxed/relaxed; d=google.com; s=arc
         uSfA==
 ARC-Authentication-Results: i=1; mx.google.com;
       dkim=pass header.i=@gmail.com header.s=20210112 header.b=mywi6bMa;
-       spf=pass (google.com: domain of sender@example.com designates 209.85.220.41 as permitted sender) smtp.mailfrom=sender@example.com;
+       spf=pass (google.com: domain of sender2@example.com designates 209.85.220.41 as permitted sender) smtp.mailfrom=sender2@example.com;
       dmarc=pass (p=NONE sp=QUARANTINE dis=NONE) header.from=gmail.com
-Return-Path: <sender@example.com>
+Return-Path: <sender2@example.com>
 Received: from mail-sor-f41.google.com (mail-sor-f41.google.com. [209.85.220.41])
        by mx.google.com with SMTPS id 11-20020aa7914b000000b0052ab192de4fsor8543241pfi.101.2022.07.26.20.42.35
-        for <recipient@example.com>
+        for <recipient2@example.com>
        (Google Transport Security);
        Tue, 26 Jul 2022 20:42:35 -0700 (PDT)
-Received-SPF: pass (google.com: domain of sender@example.com designates 209.85.220.41 as permitted sender) client-ip=209.85.220.41;
+Received-SPF: pass (google.com: domain of sender2@example.com designates 209.85.220.41 as permitted sender) client-ip=209.85.220.41;
 Authentication-Results: mx.google.com;
       dkim=pass header.i=@gmail.com header.s=20210112 header.b=mywi6bMa;
-       spf=pass (google.com: domain of sender@example.com designates 209.85.220.41 as permitted sender) smtp.mailfrom=sender@example.com;
+       spf=pass (google.com: domain of sender2@example.com designates 209.85.220.41 as permitted sender) smtp.mailfrom=sender2@example.com;
       dmarc=pass (p=NONE sp=QUARANTINE dis=NONE) header.from=gmail.com
 DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed;
        d=gmail.com; s=20210112;
@@ -63,10 +63,10 @@ X-Gm-Message-State: AJIora/WUqr3biShTHQBjSlCKazFbrLxeYpxmr1VF0TpBUbjnJrcLT77
 X-Google-Smtp-Source: AGRyM1tai6X1Bx130Y1yHG5w2e0r8wx6bbI+H+YppWmQoT28TV3dSoYCqmeQK5VViW8WuvdOpQzhPQ==
 X-Received: by 2002:a62:29c3:0:b0:52b:f774:7242 with SMTP id p186-20020a6229c3000000b0052bf7747242mr12504553pfp.67.1658893354675;
        Tue, 26 Jul 2022 20:42:34 -0700 (PDT)
-Return-Path: <sender@example.com>
+Return-Path: <sender2@example.com>
 Received: from [192.168.1.2] ([8.8.8.8])
        by smtp.gmail.com with ESMTPSA id oj16-20020a17090b4d9000b001f291c9d3bdsm387578pjb.48.2022.07.26.20.42.32
-        for <recipient@example.com>
+        for <recipient2@example.com>
        (version=TLS1_3 cipher=TLS_AES_128_GCM_SHA256 bits=128/128);
        Tue, 26 Jul 2022 20:42:33 -0700 (PDT)
 Content-Type: multipart/mixed; boundary="------------ae0qIOkrNQLQHe1YyfTsUXrk"
@@ -76,8 +76,8 @@ MIME-Version: 1.0
 User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:91.0) Gecko/20100101
 Thunderbird/91.11.0
 Content-Language: en-NZ
-To: "Recipient Ross" <recipient@example.com>
-From: Sender Smith <sender@example.com>
+To: "Recipient Ross" <recipient2@example.com>
+From: Sender Smith <sender2@example.com>
 Subject: inline + attachment

 This is a multi-part message in MIME format.
--- a/internal/storage/testdata/plain-text.eml
+++ b/internal/storage/testdata/plain-text.eml
--- a/internal/storage/utils.go
+++ b/internal/storage/utils.go
@@ -10,8 +10,8 @@ import (
 	"time"

 	"github.com/axllent/mailpit/config"
+	"github.com/axllent/mailpit/internal/logger"
 	"github.com/axllent/mailpit/server/websockets"
-	"github.com/axllent/mailpit/utils/logger"
 	"github.com/jhillyerd/enmime"
 	"github.com/k3a/html2text"
 	"github.com/leporo/sqlf"
@@ -37,6 +37,8 @@ func createSearchText(env *enmime.Envelope) string {
 	b.WriteString(env.GetHeader("To") + " ")
 	b.WriteString(env.GetHeader("Cc") + " ")
 	b.WriteString(env.GetHeader("Bcc") + " ")
+	b.WriteString(env.GetHeader("Reply-To") + " ")
+	b.WriteString(env.GetHeader("Return-Path") + " ")
 	h := strings.TrimSpace(
 		html2text.HTML2TextWithOptions(
 			env.HTML,
@@ -61,7 +63,7 @@ func createSearchText(env *enmime.Envelope) string {
 // CleanString removes unwanted characters from stored search text and search queries
 func cleanString(str string) string {
 	// remove/replace new lines
-	re := regexp.MustCompile(`(\r?\n|\t|>|<|"|\,|;)`)
+	re := regexp.MustCompile(`(\r?\n|\t|>|<|"|\,|;|\(|\))`)
 	str = re.ReplaceAllString(str, " ")

 	// remove duplicate whitespace and trim
@@ -183,3 +185,42 @@ func inArray(k string, arr []string) bool {
 func escPercentChar(s string) string {
 	return strings.ReplaceAll(s, "%", "%%")
 }
+
+// Escape certain characters in search phrases
+func escSearch(str string) string {
+	dest := make([]byte, 0, 2*len(str))
+	var escape byte
+	for i := 0; i < len(str); i++ {
+		c := str[i]
+
+		escape = 0
+
+		switch c {
+		case 0: /* Must be escaped for 'mysql' */
+			escape = '0'
+			break
+		case '\n': /* Must be escaped for logs */
+			escape = 'n'
+			break
+		case '\r':
+			escape = 'r'
+			break
+		case '\\':
+			escape = '\\'
+			break
+		case '\'':
+			escape = '\''
+			break
+		case '\032': //十进制26,八进制32,十六进制1a, /* This gives problems on Win32 */
+			escape = 'Z'
+		}
+
+		if escape != 0 {
+			dest = append(dest, '\\', escape)
+		} else {
+			dest = append(dest, c)
+		}
+	}
+
+	return string(dest)
+}
--- a/internal/tools/argsparser.go
+++ b/internal/tools/argsparser.go
@@ -0,0 +1,32 @@
+package tools
+
+import "strings"
+
+// ArgsParser will split a string by new words and quotes phrases
+func ArgsParser(s string) []string {
+	args := []string{}
+	sb := &strings.Builder{}
+	quoted := false
+	for _, r := range s {
+		if r == '"' {
+			quoted = !quoted
+			sb.WriteRune(r) // keep '"' otherwise comment this line
+		} else if !quoted && r == ' ' {
+			v := strings.TrimSpace(strings.ReplaceAll(sb.String(), "\"", ""))
+			if v != "" {
+				args = append(args, v)
+			}
+			sb.Reset()
+		} else {
+			sb.WriteRune(r)
+		}
+	}
+	if sb.Len() > 0 {
+		v := strings.TrimSpace(strings.ReplaceAll(sb.String(), "\"", ""))
+		if v != "" {
+			args = append(args, v)
+		}
+	}
+
+	return args
+}
--- a/internal/tools/html.go
+++ b/internal/tools/html.go
--- a/internal/tools/message.go
+++ b/internal/tools/message.go
@@ -7,7 +7,7 @@ import (
 	"net/mail"
 	"regexp"

-	"github.com/axllent/mailpit/utils/logger"
+	"github.com/axllent/mailpit/internal/logger"
 )

 // RemoveMessageHeaders scans a message for headers, if found them removes them.
--- a/internal/tools/tags.go
+++ b/internal/tools/tags.go
--- a/internal/tools/tools_test.go
+++ b/internal/tools/tools_test.go
@@ -0,0 +1,45 @@
+package tools
+
+import (
+	"reflect"
+	"testing"
+)
+
+func TestArgsParser(t *testing.T) {
+	tests := map[string][]string{}
+	tests["this is a test"] = []string{"this", "is", "a", "test"}
+	tests["\"this is\" a test"] = []string{"this is", "a", "test"}
+	tests["!\"this is\" a test"] = []string{"!this is", "a", "test"}
+	tests["subject:this is a test"] = []string{"subject:this", "is", "a", "test"}
+	tests["subject:\"this is\" a test"] = []string{"subject:this is", "a", "test"}
+	tests["subject:\"this is\" \"a test\""] = []string{"subject:this is", "a test"}
+	tests["subject:\"this 'is\" \"a test\""] = []string{"subject:this 'is", "a test"}
+	tests["subject:\"this 'is a test"] = []string{"subject:this 'is a test"}
+	tests["\"this is a test\"=\"this is a test\""] = []string{"this is a test=this is a test"}
+
+	for search, expected := range tests {
+		res := ArgsParser(search)
+		if !reflect.DeepEqual(res, expected) {
+			t.Log("Args parser error:", res, "!=", expected)
+			t.Fail()
+		}
+	}
+}
+
+func TestCleanTag(t *testing.T) {
+	tests := map[string]string{}
+	tests["this is a test"] = "this is a test"
+	tests["thiS IS a Test"] = "thiS IS a Test"
+	tests["thiS IS a Test :-)"] = "thiS IS a Test -"
+	tests["  thiS 99     IS a Test :-)"] = "thiS 99 IS a Test -"
+	tests["this_is-a test "] = "this_is-a test"
+	tests["this_is-a&^%%(*)@ test"] = "this_is-a test"
+
+	for search, expected := range tests {
+		res := CleanTag(search)
+		if res != expected {
+			t.Log("CleanTags error:", res, "!=", expected)
+			t.Fail()
+		}
+	}
+}
--- a/internal/updater/targz.go
+++ b/internal/updater/targz.go
--- a/internal/updater/unzip.go
+++ b/internal/updater/unzip.go
--- a/internal/updater/updater.go
+++ b/internal/updater/updater.go
@@ -13,7 +13,7 @@ import (
 	"path/filepath"
 	"runtime"

-	"github.com/axllent/mailpit/utils/logger"
+	"github.com/axllent/mailpit/internal/logger"
 	"github.com/axllent/semver"
 )

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -20,12 +20,15 @@
    "rapidoc": "^9.3.4",
    "tinycon": "^0.6.8",
    "vue": "^3.2.13",
-    "vue-css-donut-chart": "^2.0.0"
+    "vue-css-donut-chart": "^2.0.0",
+    "vue-router": "^4.2.4"
  },
  "devDependencies": {
    "@popperjs/core": "^2.11.5",
+    "@types/bootstrap": "^5.2.7",
+    "@types/tinycon": "^0.6.3",
    "@vue/compiler-sfc": "^3.2.37",
-    "esbuild": "^0.18.10",
+    "esbuild": "^0.19.1",
    "esbuild-plugin-vue-next": "^0.1.4",
    "esbuild-sass-plugin": "^2.3.2"
  }
--- a/sendmail/cmd/cmd.go
+++ b/sendmail/cmd/cmd.go
@@ -24,7 +24,7 @@ import (
 	"strings"

 	"github.com/axllent/mailpit/config"
-	"github.com/axllent/mailpit/utils/logger"
+	"github.com/axllent/mailpit/internal/logger"
 	"github.com/reiver/go-telnet"
 	flag "github.com/spf13/pflag"
 )
--- a/server/apiv1/api.go
+++ b/server/apiv1/api.go
@@ -11,12 +11,12 @@ import (
 	"strings"

 	"github.com/axllent/mailpit/config"
+	"github.com/axllent/mailpit/internal/htmlcheck"
+	"github.com/axllent/mailpit/internal/linkcheck"
+	"github.com/axllent/mailpit/internal/logger"
+	"github.com/axllent/mailpit/internal/storage"
+	"github.com/axllent/mailpit/internal/tools"
 	"github.com/axllent/mailpit/server/smtpd"
-	"github.com/axllent/mailpit/storage"
-	"github.com/axllent/mailpit/utils/htmlcheck"
-	"github.com/axllent/mailpit/utils/linkcheck"
-	"github.com/axllent/mailpit/utils/logger"
-	"github.com/axllent/mailpit/utils/tools"
 	"github.com/gorilla/mux"
 	uuid "github.com/satori/go.uuid"
 )
@@ -131,8 +131,8 @@ func Search(w http.ResponseWriter, r *http.Request) {

 	res.Start = start
 	res.Messages = messages
-	res.Count = results // legacy - now undocumented in API specs
-	res.Total = stats.Total
+	res.Count = len(messages) // legacy - now undocumented in API specs
+	res.Total = stats.Total   // total messages in mailbox
 	res.MessagesCount = results
 	res.Unread = stats.Unread
 	res.Tags = stats.Tags
@@ -142,6 +142,44 @@ func Search(w http.ResponseWriter, r *http.Request) {
 	_, _ = w.Write(bytes)
 }

+// DeleteSearch will delete all messages matching a search
+func DeleteSearch(w http.ResponseWriter, r *http.Request) {
+	// swagger:route DELETE /api/v1/search messages MessagesSummary
+	//
+	// # Delete messages by search
+	//
+	// Deletes messages matching a search.
+	//
+	//	Produces:
+	//	- application/json
+	//
+	//	Schemes: http, https
+	//
+	//	Parameters:
+	//	  + name: query
+	//	    in: query
+	//	    description: Search query
+	//	    required: true
+	//	    type: string
+	//
+	//	Responses:
+	//		200: OKResponse
+	//		default: ErrorResponse
+	search := strings.TrimSpace(r.URL.Query().Get("query"))
+	if search == "" {
+		httpError(w, "Error: no search query")
+		return
+	}
+
+	if err := storage.DeleteSearch(search); err != nil {
+		httpError(w, err.Error())
+		return
+	}
+
+	w.Header().Add("Content-Type", "text/plain")
+	_, _ = w.Write([]byte("ok"))
+}
+
 // GetMessage (method: GET) returns the Message as JSON
 func GetMessage(w http.ResponseWriter, r *http.Request) {
 	// swagger:route GET /api/v1/message/{ID} message Message
@@ -368,7 +406,7 @@ func DeleteMessages(w http.ResponseWriter, r *http.Request) {
 		}
 	}

-	w.Header().Add("Content-Type", "text/plain")
+	w.Header().Add("Content-Type", "application/json")
 	_, _ = w.Write([]byte("ok"))
 }

@@ -451,6 +489,35 @@ func SetReadStatus(w http.ResponseWriter, r *http.Request) {
 	_, _ = w.Write([]byte("ok"))
 }

+// GetTags (method: GET) will get all tags currently in use
+func GetTags(w http.ResponseWriter, _ *http.Request) {
+	// swagger:route GET /api/v1/tags tags SetTags
+	//
+	// # Get all current tags
+	//
+	// Returns a JSON array of all unique message tags.
+	//
+	//	Produces:
+	//	- application/json
+	//
+	//	Schemes: http, https
+	//
+	//	Responses:
+	//		200: ArrayResponse
+	//		default: ErrorResponse
+
+	tags := storage.GetAllTags()
+
+	data, err := json.Marshal(tags)
+	if err != nil {
+		httpError(w, err.Error())
+		return
+	}
+
+	w.Header().Add("Content-Type", "application/json")
+	_, _ = w.Write(data)
+}
+
 // SetTags (method: PUT) will set the tags for all provided IDs
 func SetTags(w http.ResponseWriter, r *http.Request) {
 	// swagger:route PUT /api/v1/tags tags SetTags
@@ -778,7 +845,7 @@ func getStartLimit(req *http.Request) (start int, limit int) {
 }

 // GetOptions returns a blank response
-func GetOptions(w http.ResponseWriter, r *http.Request) {
+func GetOptions(w http.ResponseWriter, _ *http.Request) {

 	w.Header().Set("Content-Type", "text/plain")
 	_, _ = w.Write([]byte(""))
--- a/server/apiv1/info.go
+++ b/server/apiv1/info.go
@@ -7,8 +7,8 @@ import (
 	"runtime"

 	"github.com/axllent/mailpit/config"
-	"github.com/axllent/mailpit/storage"
-	"github.com/axllent/mailpit/utils/updater"
+	"github.com/axllent/mailpit/internal/storage"
+	"github.com/axllent/mailpit/internal/updater"
 )

 // Response includes the current and latest Mailpit version, database info, and memory usage
--- a/server/apiv1/structs.go
+++ b/server/apiv1/structs.go
@@ -1,9 +1,9 @@
 package apiv1

 import (
-	"github.com/axllent/mailpit/storage"
-	"github.com/axllent/mailpit/utils/htmlcheck"
-	"github.com/axllent/mailpit/utils/linkcheck"
+	"github.com/axllent/mailpit/internal/htmlcheck"
+	"github.com/axllent/mailpit/internal/linkcheck"
+	"github.com/axllent/mailpit/internal/storage"
 )

 // MessagesSummary is a summary of a list of messages
--- a/server/apiv1/swagger.go
+++ b/server/apiv1/swagger.go
@@ -81,6 +81,13 @@ type textResponse struct {
 	Body string
 }

+// HTML response
+// swagger:response HTMLResponse
+type htmlResponse struct {
+	// in: body
+	Body string
+}
+
 // Error response
 // swagger:response ErrorResponse
 type errorResponse struct {
@@ -96,3 +103,7 @@ type okResponse struct {
 	// in: body
 	Body string
 }
+
+// Plain JSON array response
+// swagger:response ArrayResponse
+type arrayResponse []string
--- a/server/apiv1/thumbnails.go
+++ b/server/apiv1/thumbnails.go
@@ -10,8 +10,8 @@ import (
 	"net/http"
 	"strings"

-	"github.com/axllent/mailpit/storage"
-	"github.com/axllent/mailpit/utils/logger"
+	"github.com/axllent/mailpit/internal/logger"
+	"github.com/axllent/mailpit/internal/storage"
 	"github.com/disintegration/imaging"
 	"github.com/gorilla/mux"
 	"github.com/jhillyerd/enmime"
--- a/server/handlers/message-rendered.go
+++ b/server/handlers/message-rendered.go
@@ -0,0 +1,163 @@
+package handlers
+
+import (
+	"fmt"
+	"net/http"
+	"regexp"
+	"strings"
+
+	"github.com/axllent/mailpit/config"
+	"github.com/axllent/mailpit/internal/storage"
+	"github.com/gorilla/mux"
+)
+
+// GetMessageHTML (method: GET) returns a rendered version of a message's HTML part
+func GetMessageHTML(w http.ResponseWriter, r *http.Request) {
+	// swagger:route GET /view/{ID}.html testing GetMessageHTML
+	//
+	// # Render message HTML part
+	//
+	// Renders just the message's HTML part which can be used for UI integration testing.
+	// Attached inline images are modified to link to the API provided they exist.
+	// Note that is the message does not contain a HTML part then an 404 error is returned.
+	//
+	// The ID can be set to `latest` to return the latest message.
+	//
+	//	Produces:
+	//	- text/html
+	//
+	//	Schemes: http, https
+	//
+	//	Parameters:
+	//	  + name: ID
+	//	    in: path
+	//	    description: Database ID or latest
+	//	    required: true
+	//	    type: string
+	//
+	//	Responses:
+	//		200: HTMLResponse
+	//		default: ErrorResponse
+
+	vars := mux.Vars(r)
+
+	id := vars["id"]
+
+	if id == "latest" {
+		messages, err := storage.List(0, 1)
+		if err != nil {
+			httpError(w, err.Error())
+			return
+		}
+
+		if len(messages) == 0 {
+			w.WriteHeader(404)
+			fmt.Fprint(w, "Message not found")
+			return
+		}
+
+		id = messages[0].ID
+	}
+
+	msg, err := storage.GetMessage(id)
+	if err != nil {
+		w.WriteHeader(404)
+		fmt.Fprint(w, "Message not found")
+		return
+	}
+	if msg.HTML == "" {
+		w.WriteHeader(404)
+		fmt.Fprint(w, "This message does not contain a HTML part")
+		return
+	}
+
+	html := linkInlinedImages(msg)
+	w.Header().Add("Content-Type", "text/html; charset=utf-8")
+	_, _ = w.Write([]byte(html))
+}
+
+// GetMessageText (method: GET) returns a message's text part
+func GetMessageText(w http.ResponseWriter, r *http.Request) {
+	// swagger:route GET /view/{ID}.txt testing GetMessageText
+	//
+	// # Render message text part
+	//
+	// Renders just the message's text part which can be used for UI integration testing.
+	//
+	// The ID can be set to `latest` to return the latest message.
+	//
+	//	Produces:
+	//	- text/plain
+	//
+	//	Schemes: http, https
+	//
+	//	Parameters:
+	//	  + name: ID
+	//	    in: path
+	//	    description: Database ID or latest
+	//	    required: true
+	//	    type: string
+	//
+	//	Responses:
+	//		200: TextResponse
+	//		default: ErrorResponse
+
+	vars := mux.Vars(r)
+
+	id := vars["id"]
+
+	if id == "latest" {
+		messages, err := storage.List(0, 1)
+		if err != nil {
+			httpError(w, err.Error())
+			return
+		}
+
+		if len(messages) == 0 {
+			w.WriteHeader(404)
+			fmt.Fprint(w, "Message not found")
+			return
+		}
+
+		id = messages[0].ID
+	}
+
+	msg, err := storage.GetMessage(id)
+	if err != nil {
+		w.WriteHeader(404)
+		fmt.Fprint(w, "Message not found")
+		return
+	}
+
+	w.Header().Add("Content-Type", "text/plain; charset=utf-8")
+	_, _ = w.Write([]byte(msg.Text))
+}
+
+// This will remap all attachment images with relative paths
+func linkInlinedImages(msg *storage.Message) string {
+	html := msg.HTML
+
+	for _, a := range msg.Inline {
+		if a.ContentID != "" {
+			re := regexp.MustCompile(`(?i)(=["\']?)(cid:` + regexp.QuoteMeta(a.ContentID) + `)(["|\'|\\s|\\/|>|;])`)
+			u := config.Webroot + "api/v1/message/" + msg.ID + "/part/" + a.PartID
+			matches := re.FindAllStringSubmatch(html, -1)
+			for _, m := range matches {
+				html = strings.ReplaceAll(html, m[0], m[1]+u+m[3])
+			}
+		}
+	}
+
+	for _, a := range msg.Attachments {
+		if a.ContentID != "" {
+			re := regexp.MustCompile(`(?i)(=["\']?)(cid:` + regexp.QuoteMeta(a.ContentID) + `)(["|\'|\\s|\\/|>|;])`)
+			u := config.Webroot + "api/v1/message/" + msg.ID + "/part/" + a.PartID
+			matches := re.FindAllStringSubmatch(html, -1)
+			for _, m := range matches {
+				html = strings.ReplaceAll(html, m[0], m[1]+u+m[3])
+			}
+		}
+	}
+
+	return html
+}
--- a/server/handlers/proxy.go
+++ b/server/handlers/proxy.go
@@ -11,7 +11,7 @@ import (
 	"time"

 	"github.com/axllent/mailpit/config"
-	"github.com/axllent/mailpit/utils/logger"
+	"github.com/axllent/mailpit/internal/logger"
 )

 var linkRe = regexp.MustCompile(`(?i)^https?:\/\/`)
--- a/server/server.go
+++ b/server/server.go
@@ -12,12 +12,14 @@ import (
 	"os"
 	"strings"
 	"sync/atomic"
+	"text/template"

 	"github.com/axllent/mailpit/config"
+	"github.com/axllent/mailpit/internal/logger"
+	"github.com/axllent/mailpit/internal/storage"
 	"github.com/axllent/mailpit/server/apiv1"
 	"github.com/axllent/mailpit/server/handlers"
 	"github.com/axllent/mailpit/server/websockets"
-	"github.com/axllent/mailpit/utils/logger"
 	"github.com/gorilla/mux"
 )

@@ -42,7 +44,7 @@ func Listen() {

 	go websockets.MessageHub.Run()

-	r := defaultRoutes()
+	r := apiRoutes()

 	// kubernetes probes
 	r.HandleFunc(config.Webroot+"livez", handlers.HealthzHandler)
@@ -51,18 +53,30 @@ func Listen() {
 	// proxy handler for screenshots
 	r.HandleFunc(config.Webroot+"proxy", middleWareFunc(handlers.ProxyHandler)).Methods("GET")

-	// web UI websocket
-	r.HandleFunc(config.Webroot+"api/events", apiWebsocket).Methods("GET")
-
-	// virtual filesystem for others
-	r.PathPrefix(config.Webroot).Handler(middlewareHandler(http.StripPrefix(config.Webroot, http.FileServer(http.FS(serverRoot)))))
+	// virtual filesystem for /dist/ & some individual files
+	r.PathPrefix(config.Webroot + "dist/").Handler(middlewareHandler(http.StripPrefix(config.Webroot, http.FileServer(http.FS(serverRoot)))))
+	r.PathPrefix(config.Webroot + "api/").Handler(middlewareHandler(http.StripPrefix(config.Webroot, http.FileServer(http.FS(serverRoot)))))
+	r.Path(config.Webroot + "favicon.ico").Handler(middlewareHandler(http.StripPrefix(config.Webroot, http.FileServer(http.FS(serverRoot)))))
+	r.Path(config.Webroot + "favicon.svg").Handler(middlewareHandler(http.StripPrefix(config.Webroot, http.FileServer(http.FS(serverRoot)))))
+	r.Path(config.Webroot + "mailpit.svg").Handler(middlewareHandler(http.StripPrefix(config.Webroot, http.FileServer(http.FS(serverRoot)))))
+	r.Path(config.Webroot + "notification.png").Handler(middlewareHandler(http.StripPrefix(config.Webroot, http.FileServer(http.FS(serverRoot)))))

 	// redirect to webroot if no trailing slash
 	if config.Webroot != "/" {
-		redir := strings.TrimRight(config.Webroot, "/")
-		r.HandleFunc(redir, middleWareFunc(addSlashToWebroot)).Methods("GET")
+		redirect := strings.TrimRight(config.Webroot, "/")
+		r.HandleFunc(redirect, middleWareFunc(addSlashToWebroot)).Methods("GET")
 	}

+	// frontend testing
+	r.HandleFunc(config.Webroot+"view/{id}.html", handlers.GetMessageHTML).Methods("GET")
+	r.HandleFunc(config.Webroot+"view/{id}.txt", handlers.GetMessageText).Methods("GET")
+
+	// web UI via virtual index.html
+	r.PathPrefix(config.Webroot + "view/").Handler(middleWareFunc(index)).Methods("GET")
+	r.Path(config.Webroot + "search").Handler(middleWareFunc(index)).Methods("GET")
+	r.Path(config.Webroot).Handler(middleWareFunc(index)).Methods("GET")
+
+	// put it all together
 	http.Handle("/", r)

 	if config.UIAuthFile != "" {
@@ -81,15 +95,17 @@ func Listen() {
 	}
 }

-func defaultRoutes() *mux.Router {
+func apiRoutes() *mux.Router {
 	r := mux.NewRouter()

 	// API V1
 	r.HandleFunc(config.Webroot+"api/v1/messages", middleWareFunc(apiv1.GetMessages)).Methods("GET")
 	r.HandleFunc(config.Webroot+"api/v1/messages", middleWareFunc(apiv1.SetReadStatus)).Methods("PUT")
 	r.HandleFunc(config.Webroot+"api/v1/messages", middleWareFunc(apiv1.DeleteMessages)).Methods("DELETE")
+	r.HandleFunc(config.Webroot+"api/v1/tags", middleWareFunc(apiv1.GetTags)).Methods("GET")
 	r.HandleFunc(config.Webroot+"api/v1/tags", middleWareFunc(apiv1.SetTags)).Methods("PUT")
 	r.HandleFunc(config.Webroot+"api/v1/search", middleWareFunc(apiv1.Search)).Methods("GET")
+	r.HandleFunc(config.Webroot+"api/v1/search", middleWareFunc(apiv1.DeleteSearch)).Methods("DELETE")
 	r.HandleFunc(config.Webroot+"api/v1/message/{id}/part/{partID}", middleWareFunc(apiv1.DownloadAttachment)).Methods("GET")
 	r.HandleFunc(config.Webroot+"api/v1/message/{id}/part/{partID}/thumb", middleWareFunc(apiv1.Thumbnail)).Methods("GET")
 	r.HandleFunc(config.Webroot+"api/v1/message/{id}/headers", middleWareFunc(apiv1.GetHeaders)).Methods("GET")
@@ -104,6 +120,9 @@ func defaultRoutes() *mux.Router {
 	r.HandleFunc(config.Webroot+"api/v1/webui", middleWareFunc(apiv1.WebUIConfig)).Methods("GET")
 	r.HandleFunc(config.Webroot+"api/v1/swagger.json", middleWareFunc(swaggerBasePath)).Methods("GET")

+	// web UI websocket
+	r.HandleFunc(config.Webroot+"api/events", apiWebsocket).Methods("GET")
+
 	// return blank 200 response for OPTIONS requests for CORS
 	r.PathPrefix(config.Webroot + "api/v1/").Handler(middleWareFunc(apiv1.GetOptions)).Methods("OPTIONS")

@@ -211,6 +230,7 @@ func addSlashToWebroot(w http.ResponseWriter, r *http.Request) {
 // Websocket to broadcast changes
 func apiWebsocket(w http.ResponseWriter, r *http.Request) {
 	websockets.ServeWs(websockets.MessageHub, w, r)
+	storage.BroadcastMailboxStats()
 }

 // Wrapper to artificially inject a basePath to the swagger.json if a webroot has been specified
@@ -230,3 +250,55 @@ func swaggerBasePath(w http.ResponseWriter, _ *http.Request) {
 	w.Header().Add("Content-Type", "application/json")
 	_, _ = w.Write(f)
 }
+
+// Just returns the default HTML template
+func index(w http.ResponseWriter, _ *http.Request) {
+
+	var h = `<!DOCTYPE html>
+<html lang="en" class="h-100">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width,initial-scale=1.0">
+	<meta name="referrer" content="no-referrer">
+	<meta name="robots" content="noindex, nofollow, noarchive">
+	<link rel="icon" href="{{ .Webroot }}favicon.svg">
+	<title>Mailpit</title>
+	<link rel=stylesheet href="{{ .Webroot }}dist/app.css?{{ .Version }}">
+</head>
+
+<body class="h-100">
+	<div class="container-fluid h-100 d-flex flex-column" id="app" data-webroot="{{ .Webroot }}">
+		<noscript>You require JavaScript to use this app.</noscript>
+	</div>
+
+	<script src="{{ .Webroot }}dist/app.js?{{ .Version }}"></script>
+</body>
+
+</html>`
+
+	t, err := template.New("index").Parse(h)
+	if err != nil {
+		panic(err)
+	}
+
+	data := struct {
+		Webroot string
+		Version string
+	}{
+		Webroot: config.Webroot,
+		Version: config.Version,
+	}
+
+	buff := new(bytes.Buffer)
+
+	err = t.Execute(buff, data)
+	if err != nil {
+		panic(err)
+	}
+
+	buff.Bytes()
+
+	w.Header().Add("Content-Type", "text/html")
+	_, _ = w.Write(buff.Bytes())
+}
--- a/server/server_test.go
+++ b/server/server_test.go
@@ -4,7 +4,7 @@ import (
 	"bytes"
 	"encoding/json"
 	"fmt"
-	"io/ioutil"
+	"io"
 	"net/http"
 	"net/http/httptest"
 	"net/url"
@@ -12,9 +12,9 @@ import (
 	"testing"

 	"github.com/axllent/mailpit/config"
+	"github.com/axllent/mailpit/internal/logger"
+	"github.com/axllent/mailpit/internal/storage"
 	"github.com/axllent/mailpit/server/apiv1"
-	"github.com/axllent/mailpit/storage"
-	"github.com/axllent/mailpit/utils/logger"
 	"github.com/jhillyerd/enmime"
 )

@@ -25,11 +25,11 @@ var (
 	}
 )

-func Test_APIv1(t *testing.T) {
+func TestAPIv1Messages(t *testing.T) {
 	setup()
 	defer storage.Close()

-	r := defaultRoutes()
+	r := apiRoutes()

 	ts := httptest.NewServer(r)
 	defer ts.Close()
@@ -54,11 +54,11 @@ func Test_APIv1(t *testing.T) {
 		t.Errorf(err.Error())
 	}

-	// read first 10
+	// read first 10 messages
 	t.Log("Read first 10 messages including raw & headers")
 	putIDS := []string{}
-	for indx, msg := range m.Messages {
-		if indx == 10 {
+	for idx, msg := range m.Messages {
+		if idx == 10 {
 			break
 		}

@@ -66,12 +66,12 @@ func Test_APIv1(t *testing.T) {
 			t.Errorf(err.Error())
 		}

-		// test RAW
+		// get RAW
 		if _, err := clientGet(ts.URL + "/api/v1/message/" + msg.ID + "/raw"); err != nil {
 			t.Errorf(err.Error())
 		}

-		// test headers
+		// het headers
 		if _, err := clientGet(ts.URL + "/api/v1/message/" + msg.ID + "/headers"); err != nil {
 			t.Errorf(err.Error())
 		}
@@ -79,11 +79,63 @@ func Test_APIv1(t *testing.T) {
 		// store for later
 		putIDS = append(putIDS, msg.ID)
 	}
+
+	// 10 should be marked as read
 	assertStatsEqual(t, ts.URL+"/api/v1/messages", 90, 100)

+	// delete all
+	t.Log("Delete all messages")
+	_, err = clientDelete(ts.URL+"/api/v1/messages", "{}")
+	if err != nil {
+		t.Errorf("Expected nil, received %s", err.Error())
+	}
+	assertStatsEqual(t, ts.URL+"/api/v1/messages", 0, 0)
+}
+
+func TestAPIv1ToggleReadStatus(t *testing.T) {
+	setup()
+	defer storage.Close()
+
+	r := apiRoutes()
+
+	ts := httptest.NewServer(r)
+	defer ts.Close()
+
+	m, err := fetchMessages(ts.URL + "/api/v1/messages")
+	if err != nil {
+		t.Errorf(err.Error())
+	}
+
+	// check count of empty database
+	assertStatsEqual(t, ts.URL+"/api/v1/messages", 0, 0)
+
+	// insert 100
+	t.Log("Insert 100 messages")
+	insertEmailData(t)
+	assertStatsEqual(t, ts.URL+"/api/v1/messages", 100, 100)
+
+	m, err = fetchMessages(ts.URL + "/api/v1/messages")
+	if err != nil {
+		t.Errorf(err.Error())
+	}
+
+	// read first 10 IDs
+	t.Log("Get first 10 IDs")
+	putIDS := []string{}
+	for idx, msg := range m.Messages {
+		if idx == 10 {
+			break
+		}
+
+		// store for later
+		putIDS = append(putIDS, msg.ID)
+	}
+	assertStatsEqual(t, ts.URL+"/api/v1/messages", 100, 100)
+
 	// mark first 10 as unread
-	t.Log("Mark first 10 as unread")
+	t.Log("Mark first 10 as read")
 	putData := putDataStruct
+	putData.Read = true
 	putData.IDs = putIDS
 	j, err := json.Marshal(putData)
 	if err != nil {
@@ -93,11 +145,11 @@ func Test_APIv1(t *testing.T) {
 	if err != nil {
 		t.Errorf(err.Error())
 	}
-	assertStatsEqual(t, ts.URL+"/api/v1/messages", 100, 100)
+	assertStatsEqual(t, ts.URL+"/api/v1/messages", 90, 100)

 	// mark first 10 as read
-	t.Log("Mark first 10 as read")
-	putData.Read = true
+	t.Log("Mark first 10 as unread")
+	putData.Read = false
 	j, err = json.Marshal(putData)
 	if err != nil {
 		t.Errorf(err.Error())
@@ -106,25 +158,7 @@ func Test_APIv1(t *testing.T) {
 	if err != nil {
 		t.Errorf(err.Error())
 	}
-	assertStatsEqual(t, ts.URL+"/api/v1/messages", 90, 100)
-
-	// search
-	assertSearchEqual(t, ts.URL+"/api/v1/search", "from-1@example.com", 1)
-	assertSearchEqual(t, ts.URL+"/api/v1/search", "to:from-1@example.com", 0)
-	assertSearchEqual(t, ts.URL+"/api/v1/search", "from:@example.com", 100)
-	assertSearchEqual(t, ts.URL+"/api/v1/search", "subject:\"Subject line\"", 100)
-	assertSearchEqual(t, ts.URL+"/api/v1/search", "subject:\"Subject line 17 end\"", 1)
-	assertSearchEqual(t, ts.URL+"/api/v1/search", "!thisdoesnotexist", 100)
-	assertSearchEqual(t, ts.URL+"/api/v1/search", "-thisdoesnotexist", 100)
-	assertSearchEqual(t, ts.URL+"/api/v1/search", "thisdoesnotexist", 0)
-
-	// delete first 10
-	t.Log("Delete first 10")
-	_, err = clientDelete(ts.URL+"/api/v1/messages", string(j))
-	if err != nil {
-		t.Errorf(err.Error())
-	}
-	assertStatsEqual(t, ts.URL+"/api/v1/messages", 90, 90)
+	assertStatsEqual(t, ts.URL+"/api/v1/messages", 100, 100)

 	// mark all as read
 	putData.Read = true
@@ -139,15 +173,34 @@ func Test_APIv1(t *testing.T) {
 	if err != nil {
 		t.Errorf(err.Error())
 	}
-	assertStatsEqual(t, ts.URL+"/api/v1/messages", 0, 90)
+	assertStatsEqual(t, ts.URL+"/api/v1/messages", 0, 100)
+}

-	// delete all
-	t.Log("Delete all messages")
-	_, err = clientDelete(ts.URL+"/api/v1/messages", "{}")
-	if err != nil {
-		t.Errorf("Expected nil, received %s", err.Error())
-	}
-	assertStatsEqual(t, ts.URL+"/api/v1/messages", 0, 0)
+func TestAPIv1Search(t *testing.T) {
+	setup()
+	defer storage.Close()
+
+	r := apiRoutes()
+
+	ts := httptest.NewServer(r)
+	defer ts.Close()
+
+	// insert 100
+	t.Log("Insert 100 messages")
+	insertEmailData(t)
+	assertStatsEqual(t, ts.URL+"/api/v1/messages", 100, 100)
+
+	// search
+	assertSearchEqual(t, ts.URL+"/api/v1/search", "from-1@example.com", 1)
+	assertSearchEqual(t, ts.URL+"/api/v1/search", "from:from-1@example.com", 1)
+	assertSearchEqual(t, ts.URL+"/api/v1/search", "-from:from-1@example.com", 99)
+	assertSearchEqual(t, ts.URL+"/api/v1/search", "to:from-1@example.com", 0)
+	assertSearchEqual(t, ts.URL+"/api/v1/search", "from:@example.com", 100)
+	assertSearchEqual(t, ts.URL+"/api/v1/search", "subject:\"Subject line\"", 100)
+	assertSearchEqual(t, ts.URL+"/api/v1/search", "subject:\"Subject line 17 end\"", 1)
+	assertSearchEqual(t, ts.URL+"/api/v1/search", "!thisdoesnotexist", 100)
+	assertSearchEqual(t, ts.URL+"/api/v1/search", "-thisdoesnotexist", 100)
+	assertSearchEqual(t, ts.URL+"/api/v1/search", "thisdoesnotexist", 0)
 }

 func setup() {
@@ -253,7 +306,7 @@ func clientGet(url string) ([]byte, error) {

 	defer resp.Body.Close()

-	data, err := ioutil.ReadAll(resp.Body)
+	data, err := io.ReadAll(resp.Body)

 	return data, err
 }
@@ -278,7 +331,7 @@ func clientDelete(url, body string) ([]byte, error) {
 		return nil, fmt.Errorf("%s returned status %d", url, resp.StatusCode)
 	}

-	data, err := ioutil.ReadAll(resp.Body)
+	data, err := io.ReadAll(resp.Body)

 	return data, err
 }
@@ -303,7 +356,7 @@ func clientPut(url, body string) ([]byte, error) {
 		return nil, fmt.Errorf("%s returned status %d", url, resp.StatusCode)
 	}

-	data, err := ioutil.ReadAll(resp.Body)
+	data, err := io.ReadAll(resp.Body)

 	return data, err
 }
--- a/server/smtpd/smtp.go
+++ b/server/smtpd/smtp.go
@@ -8,7 +8,7 @@ import (
 	"net/smtp"

 	"github.com/axllent/mailpit/config"
-	"github.com/axllent/mailpit/utils/logger"
+	"github.com/axllent/mailpit/internal/logger"
 )

 func allowedRecipients(to []string) []string {
@@ -63,22 +63,10 @@ func Send(from string, to []string, msg []byte) error {
 		}
 	}

-	var a smtp.Auth
+	auth := relayAuthFromConfig()

-	if config.SMTPRelayConfig.Auth == "plain" {
-		a = smtp.PlainAuth("", config.SMTPRelayConfig.Username, config.SMTPRelayConfig.Password, config.SMTPRelayConfig.Host)
-	}
-
-	if config.SMTPRelayConfig.Auth == "login" {
-		a = LoginAuth(config.SMTPRelayConfig.Username, config.SMTPRelayConfig.Password)
-	}
-
-	if config.SMTPRelayConfig.Auth == "cram-md5" {
-		a = smtp.CRAMMD5Auth(config.SMTPRelayConfig.Username, config.SMTPRelayConfig.Secret)
-	}
-
-	if a != nil {
-		if err = c.Auth(a); err != nil {
+	if auth != nil {
+		if err = c.Auth(auth); err != nil {
 			return fmt.Errorf("error response to AUTH command: %s", err.Error())
 		}
 	}
@@ -109,6 +97,25 @@ func Send(from string, to []string, msg []byte) error {
 	return c.Quit()
 }

+// Return the SMTP relay authentication based on config
+func relayAuthFromConfig() smtp.Auth {
+	var a smtp.Auth
+
+	if config.SMTPRelayConfig.Auth == "plain" {
+		a = smtp.PlainAuth("", config.SMTPRelayConfig.Username, config.SMTPRelayConfig.Password, config.SMTPRelayConfig.Host)
+	}
+
+	if config.SMTPRelayConfig.Auth == "login" {
+		a = LoginAuth(config.SMTPRelayConfig.Username, config.SMTPRelayConfig.Password)
+	}
+
+	if config.SMTPRelayConfig.Auth == "cram-md5" {
+		a = smtp.CRAMMD5Auth(config.SMTPRelayConfig.Username, config.SMTPRelayConfig.Secret)
+	}
+
+	return a
+}
+
 // Custom implementation of LOGIN SMTP authentication
 // @see https://gist.github.com/andelf/5118732
 type loginAuth struct {
--- a/server/smtpd/smtpd.go
+++ b/server/smtpd/smtpd.go
@@ -10,8 +10,8 @@ import (
 	"strings"

 	"github.com/axllent/mailpit/config"
-	"github.com/axllent/mailpit/storage"
-	"github.com/axllent/mailpit/utils/logger"
+	"github.com/axllent/mailpit/internal/logger"
+	"github.com/axllent/mailpit/internal/storage"
 	"github.com/mhale/smtpd"
 	uuid "github.com/satori/go.uuid"
 )
--- a/server/ui-src/App.vue
+++ b/server/ui-src/App.vue
--- a/server/ui-src/app.js
+++ b/server/ui-src/app.js
@@ -1,7 +1,11 @@
-import { createApp } from 'vue';
-import App from './App.vue';
-import "./assets/styles.scss";
-import "bootstrap-icons/font/bootstrap-icons.scss";
-import "bootstrap";
+import App from './App.vue'
+import router from './router'
+import { createApp } from 'vue'

-createApp(App).mount('#app');
+import './assets/styles.scss'
+import 'bootstrap-icons/font/bootstrap-icons.scss'
+import 'bootstrap'
+
+const app = createApp(App)
+app.use(router)
+app.mount('#app')
--- a/server/ui-src/assets/_bootstrap.scss
+++ b/server/ui-src/assets/_bootstrap.scss
@@ -39,7 +39,7 @@
 // @import "bootstrap/scss/popover";
 // @import "bootstrap/scss/carousel";
@import "bootstrap/scss/spinners";
-// @import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/offcanvas";
 // @import "bootstrap/scss/popover";
@import "bootstrap/scss/progress";

--- a/server/ui-src/assets/_bootstrap_variables.scss
+++ b/server/ui-src/assets/_bootstrap_variables.scss
@@ -1,9 +1,21 @@
 // Removed "Noto Color Emoji" from list re: https://github.com/axllent/mailpit/issues/92
-$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans",
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$font-family-sans-serif:
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    "Noto Sans",
+    "Liberation Sans",
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol";

 $link-decoration: none;
 $primary: #2c3e50;
 $list-group-disabled-color: #adb5bd;
 $enable-negative-margins: true;
 $body-color-dark: #e7eaed;
+$offcanvas-border-width: 0;
--- a/server/ui-src/assets/styles.scss
+++ b/server/ui-src/assets/styles.scss
@@ -1,373 +1,382 @@
@import "./bootstrap";

 [v-cloak] {
-    display: none !important;
+	display: none !important;
 }

 .navbar {
-    z-index: 99;
+	z-index: 99;

-    .navbar-brand {
-        color: #2d4a5d;
-        transition: all 0.2s;
+	.navbar-brand {
+		color: #2d4a5d;
+		transition: all 0.2s;

-        img {
-            width: 40px;
-        }
+		img {
+			width: 40px;
+		}

-        @include media-breakpoint-down(md) {
-            padding: 0;
+		@include media-breakpoint-down(md) {
+			padding: 0;

-            img {
-                width: 35px;
-            }
-        }
-    }
+			img {
+				width: 35px;
+			}
+		}
+	}
 }

 .navbar-brand {
-    span {
-        opacity: 0.8;
-        transition: all 0.5s;
-    }
+	span {
+		opacity: 0.8;
+		transition: all 0.5s;
+	}

-    &:hover {
-        span {
-            opacity: 1;
-        }
-    }
+	&:hover {
+		span {
+			opacity: 1;
+		}
+	}
 }

 .nav-tabs .nav-link {
-    @include media-breakpoint-down(xl) {
-        padding-left: 10px;
-        padding-right: 10px;
-    }
+	@include media-breakpoint-down(xl) {
+		padding-left: 10px;
+		padding-right: 10px;
+	}
 }

 :not(.text-view) > a:not(.no-icon) {
-    &[href^="http://"],
-    &[href^="https://"]
-    {
-        &:after {
-            content: "\f1c5";
-            display: inline-block;
-            font-family: "bootstrap-icons" !important;
-            font-style: normal;
-            font-weight: normal !important;
-            font-variant: normal;
-            text-transform: none;
-            line-height: 1;
-            vertical-align: -0.125em;
-            margin-left: 4px;
-        }
-    }
+	&[href^="http://"],
+	&[href^="https://"]
+	{
+		&:after {
+			content: "\f1c5";
+			display: inline-block;
+			font-family: "bootstrap-icons" !important;
+			font-style: normal;
+			font-weight: normal !important;
+			font-variant: normal;
+			text-transform: none;
+			line-height: 1;
+			vertical-align: -0.125em;
+			margin-left: 4px;
+		}
+	}
 }

-#loading {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: rgba(255, 255, 255, 0.4);
-    z-index: 1500;
+.loader {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(255, 255, 255, 0.4);
+	z-index: 1500;
 }

 // dark mode adjustments
@include color-mode(dark) {
-    #loading {
-        background: rgba(0, 0, 0, 0.4);
-    }
+	.loader {
+		background: rgba(0, 0, 0, 0.4);
+	}

-    .token.tag,
-    .token.property {
-        color: #ee6969;
-    }
+	.token.tag,
+	.token.property {
+		color: #ee6969;
+	}
+}
+
+.about-mailpit {
+	@include media-breakpoint-down(md) {
+		width: var(--bs-offcanvas-width);
+		margin-left: -1rem !important;
+	}
 }

 .message {
-    &.read {
-        color: $text-muted;
+	&.read {
+		color: $text-muted;

-        b {
-            font-weight: normal;
-        }
-    }
-    &.selected {
-        background: var(--bs-primary-bg-subtle);
-    }
+		b {
+			font-weight: normal;
+		}
+	}
+	&.selected {
+		background: var(--bs-primary-bg-subtle);
+	}
 }

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

 #nav-html-source pre[class*="language-"] code {
-    white-space: pre-wrap;
+	white-space: pre-wrap;
 }

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

 .messageHeaders {
-    margin: 15px 0 0;
+	margin: 15px 0 0;

-    th {
-        padding-right: 1.5rem;
-        font-weight: normal;
-        vertical-align: top;
-    }
+	th {
+		padding-right: 1.5rem;
+		font-weight: normal;
+		vertical-align: top;
+	}

-    td {
-        vertical-align: top;
-    }
+	td {
+		vertical-align: top;
+	}
 }

 #nav-html {
-    @include media-breakpoint-up(md) {
-        padding-right: 1.5rem;
-    }
+	@include media-breakpoint-up(md) {
+		padding-right: 1.5rem;
+	}
 }

 #preview-html {
-    min-height: 300px;
+	min-height: 300px;

-    &.tablet,
-    &.phone {
-        border: solid $gray-300 1px;
-    }
+	&.tablet,
+	&.phone {
+		border: solid $gray-300 1px;
+	}
 }

 #responsive-view {
-    margin: auto;
-    transition: width 0.5s;
-    position: relative;
+	margin: auto;
+	transition: width 0.5s;
+	position: relative;

-    &.tablet,
-    &.phone {
-        border-radius: 35px;
-        box-sizing: content-box;
-        padding-bottom: 76px;
-        padding-top: 54px;
-        padding-left: 10px;
-        padding-right: 10px;
-        background: $gray-800;
+	&.tablet,
+	&.phone {
+		border-radius: 35px;
+		box-sizing: content-box;
+		padding-bottom: 76px;
+		padding-top: 54px;
+		padding-left: 10px;
+		padding-right: 10px;
+		background: $gray-800;

-        iframe {
-            height: 100% !important;
-            background: #fff;
-        }
-    }
+		iframe {
+			height: 100% !important;
+			background: #fff;
+		}
+	}

-    &.phone {
-        &::before {
-            border-radius: 5px;
-            background: $gray-600;
-            top: 22px;
-            content: "";
-            display: block;
-            height: 10px;
-            left: 50%;
-            position: absolute;
-            transform: translateX(-50%);
-            width: 80px;
-        }
+	&.phone {
+		&::before {
+			border-radius: 5px;
+			background: $gray-600;
+			top: 22px;
+			content: "";
+			display: block;
+			height: 10px;
+			left: 50%;
+			position: absolute;
+			transform: translateX(-50%);
+			width: 80px;
+		}

-        &::after {
-            border-radius: 20px;
-            background: $gray-900;
-            bottom: 20px;
-            content: "";
-            display: block;
-            width: 65px;
-            height: 40px;
-            left: 50%;
-            position: absolute;
-            transform: translateX(-50%);
-        }
-    }
+		&::after {
+			border-radius: 20px;
+			background: $gray-900;
+			bottom: 20px;
+			content: "";
+			display: block;
+			width: 65px;
+			height: 40px;
+			left: 50%;
+			position: absolute;
+			transform: translateX(-50%);
+		}
+	}

-    &.tablet {
-        &::before {
-            border-radius: 50%;
-            border: solid #b5b0b0 2px;
-            top: 22px;
-            content: "";
-            display: block;
-            width: 10px;
-            height: 10px;
-            left: 50%;
-            position: absolute;
-            transform: translateX(-50%);
-        }
+	&.tablet {
+		&::before {
+			border-radius: 50%;
+			border: solid #b5b0b0 2px;
+			top: 22px;
+			content: "";
+			display: block;
+			width: 10px;
+			height: 10px;
+			left: 50%;
+			position: absolute;
+			transform: translateX(-50%);
+		}

-        &::after {
-            border-radius: 50%;
-            border: solid #b5b0b0 2px;
-            bottom: 23px;
-            content: "";
-            display: block;
-            width: 30px;
-            height: 30px;
-            left: 50%;
-            position: absolute;
-            transform: translateX(-50%);
-        }
-    }
+		&::after {
+			border-radius: 50%;
+			border: solid #b5b0b0 2px;
+			bottom: 23px;
+			content: "";
+			display: block;
+			width: 30px;
+			height: 30px;
+			left: 50%;
+			position: absolute;
+			transform: translateX(-50%);
+		}
+	}
+}
+
+.messageHeaders {
+	th {
+		vertical-align: top;
+	}
 }

 .list-group-item.message:first-child {
-    border-top: 0;
+	border-top: 0;
 }

 body.blur {
-    .privacy {
-        filter: blur(3px);
-    }
+	.privacy {
+		filter: blur(3px);
+	}
 }

 .card.attachment {
-    color: $gray-800;
+	color: $gray-800;

-    .icon {
-        position: absolute;
-        top: 18px;
-        left: 0;
-        right: 0;
-        font-size: 3.5rem;
-        text-align: center;
-        color: $gray-300;
-    }
+	.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-body {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		overflow: hidden;
+		opacity: 0;
+	}

-    .card-footer {
-        background: $gray-300;
+	.card-footer {
+		background: $gray-300;

-        .bi {
-            font-size: 1.3em;
-            margin-left: -10px;
-        }
-    }
+		.bi {
+			font-size: 1.3em;
+			margin-left: -10px;
+		}
+	}

-    &:hover {
-        .card-body {
-            opacity: 1;
-            background: $gray-300;
-        }
-    }
+	&:hover {
+		.card-body {
+			opacity: 1;
+			background: $gray-300;
+		}
+	}
 }

 .form-select.tag-selector {
-    display: none;
+	display: none;
 }

 .form-control.dropdown {
-    padding: 0;
-    border: 0;
+	padding: 0;
+	border: 0;

-    input {
-        font-size: 0.875em;
-    }
+	input {
+		font-size: 0.875em;
+	}

-    div {
-        cursor: text; // html5-tags
-    }
+	div {
+		cursor: text; // html5-tags
+	}
 }

 // bootstrap5-tags
 .tags-badge {
-    display: flex;
+	display: flex;
 }

 #DownloadBtn {
-    @include media-breakpoint-down(sm) {
-        position: static;
+	@include media-breakpoint-down(sm) {
+		position: static;

-        .dropdown-menu {
-            left: 0;
-            right: 0;
-        }
-    }
+		.dropdown-menu {
+			left: 0;
+			right: 0;
+		}
+	}
 }

 #ReleaseModal {
-    .form-control.dropdown {
-        div {
-            @extend .form-control;
-        }
-    }
+	.form-control.dropdown {
+		div {
+			@extend .form-control;
+		}
+	}
 }

 /* 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;
+	// 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;
+	position: relative;
+	overflow: visible;
 }
 pre[class*="language-"] > code {
-    position: relative;
-    z-index: 1;
+	position: relative;
+	z-index: 1;
 }
 code[class*="language-"] {
-    max-height: inherit;
-    height: inherit;
-    padding: 0 1em;
-    display: block;
-    overflow: auto;
+	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;
+	// 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;
+	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,
@@ -375,10 +384,10 @@ pre[class*="language-"] {
 .token.comment,
 .token.doctype,
 .token.prolog {
-    color: #7d8b99;
+	color: #7d8b99;
 }
 .token.punctuation {
-    color: #5f6364;
+	color: #5f6364;
 }
 .token.boolean,
 .token.constant,
@@ -388,7 +397,7 @@ pre[class*="language-"] {
 .token.property,
 .token.symbol,
 .token.tag {
-    color: #c92c2c;
+	color: #c92c2c;
 }
 .token.attr-name,
 .token.builtin,
@@ -397,70 +406,70 @@ pre[class*="language-"] {
 .token.inserted,
 .token.selector,
 .token.string {
-    color: #2f9c0a;
+	color: #2f9c0a;
 }
 .token.entity,
 .token.operator,
 .token.url,
 .token.variable {
-    color: #a67f59;
-    // background: rgba(255, 255, 255, 0.5);
+	color: #a67f59;
+	// background: rgba(255, 255, 255, 0.5);
 }
 .token.atrule,
 .token.attr-value,
 .token.class-name,
 .token.keyword {
-    color: #1990b8;
+	color: #1990b8;
 }
 .token.important,
 .token.regex {
-    color: #e90;
+	color: #e90;
 }
 .language-css .token.string,
 .style .token.string {
-    color: #a67f59;
-    // background: rgba(255, 255, 255, 0.5);
+	color: #a67f59;
+	// background: rgba(255, 255, 255, 0.5);
 }
 .token.important {
-    font-weight: 400;
+	font-weight: 400;
 }
 .token.bold {
-    font-weight: 700;
+	font-weight: 700;
 }
 .token.italic {
-    font-style: italic;
+	font-style: italic;
 }
 // .token.entity {
 //     cursor: help;
 // }
 .token.namespace {
-    opacity: 0.7;
+	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-"]::after,
+	pre[class*="language-"]::before {
+		bottom: 14px;
+		box-shadow: none;
+	}
 }
 pre[class*="language-"].line-numbers.line-numbers {
-    padding-left: 0;
+	padding-left: 0;
 }
 pre[class*="language-"].line-numbers.line-numbers code {
-    padding-left: 3.8em;
+	padding-left: 3.8em;
 }
 pre[class*="language-"].line-numbers.line-numbers .line-numbers-rows {
-    left: 0;
+	left: 0;
 }
 pre[class*="language-"][data-line] {
-    padding-top: 0;
-    padding-bottom: 0;
-    padding-left: 0;
+	padding-top: 0;
+	padding-bottom: 0;
+	padding-left: 0;
 }
 pre[data-line] code {
-    position: relative;
-    padding-left: 4em;
+	position: relative;
+	padding-left: 4em;
 }
 pre .line-highlight {
-    margin-top: 0;
+	margin-top: 0;
 }
--- a/server/ui-src/components/AboutMailpit.vue
+++ b/server/ui-src/components/AboutMailpit.vue
@@ -0,0 +1,239 @@
+<script>
+import AjaxLoader from './AjaxLoader.vue'
+import CommonMixins from '../mixins/CommonMixins'
+import { mailbox } from '../stores/mailbox'
+
+export default {
+	mixins: [CommonMixins],
+
+	components: {
+		AjaxLoader
+	},
+
+	props: {
+		modals: {
+			type: Boolean,
+			default: false,
+		}
+	},
+
+	data() {
+		return {
+			mailbox,
+			theme: 'auto',
+			icon: 'circle-half',
+			icons: {
+				'auto': 'circle-half',
+				'light': 'sun-fill',
+				'dark': 'moon-stars-fill'
+			},
+		}
+	},
+
+	mounted() {
+		this.setTheme(this.getPreferredTheme())
+	},
+
+	methods: {
+		loadInfo: function () {
+			let self = this
+			self.get(self.resolve('/api/v1/info'), false, function (response) {
+				mailbox.appInfo = response.data
+				self.modal('AppInfoModal').show()
+			})
+		},
+
+		getStoredTheme: function () {
+			let theme = localStorage.getItem('theme')
+			if (!theme) {
+				theme = 'auto'
+			}
+
+			return theme
+		},
+
+		setStoredTheme: function (theme) {
+			localStorage.setItem('theme', theme)
+			this.setTheme(theme)
+		},
+
+		getPreferredTheme: function () {
+			const storedTheme = this.getStoredTheme()
+			if (storedTheme) {
+				return storedTheme
+			}
+
+			return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+		},
+
+		setTheme: function (theme) {
+			this.icon = this.icons[theme]
+			this.theme = theme
+			if (
+				theme === 'auto' &&
+				window.matchMedia('(prefers-color-scheme: dark)').matches
+			) {
+				document.documentElement.setAttribute('data-bs-theme', 'dark')
+			} else {
+				document.documentElement.setAttribute('data-bs-theme', theme)
+			}
+		},
+
+		requestNotifications: function () {
+			// check if the browser supports notifications
+			if (!("Notification" in window)) {
+				alert("This browser does not support desktop notification")
+			}
+
+			// we need to ask the user for permission
+			else if (Notification.permission !== "denied") {
+				let self = this
+				Notification.requestPermission().then(function (permission) {
+					if (permission === "granted") {
+						mailbox.notificationsEnabled = true
+					}
+				})
+			}
+		},
+	}
+}
+</script>
+
+<template>
+	<template v-if="!modals">
+		<div class="position-fixed bg-body bottom-0 ms-n1 py-2 text-muted small col-xl-2 col-md-3 pe-3 z-3 about-mailpit">
+			<button class="text-muted btn btn-sm" v-on:click="loadInfo">
+				<i class="bi bi-info-circle-fill me-1"></i>
+				About
+			</button>
+
+			<div class="dropdown bd-mode-toggle float-end me-2 d-inline-block">
+				<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" aria-expanded="false"
+					title="Toggle theme" data-bs-toggle="dropdown" aria-label="Toggle theme">
+					<i :class="'bi bi-' + icon + ' my-1'"></i>
+					<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
+				</button>
+				<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
+					<li>
+						<button type="button" class="dropdown-item d-flex align-items-center"
+							:class="theme == 'light' ? 'active' : ''" @click="setStoredTheme('light')">
+							<i class="bi bi-sun-fill me-2 opacity-50"></i>
+							Light
+						</button>
+					</li>
+					<li>
+						<button type="button" class="dropdown-item d-flex align-items-center"
+							:class="theme == 'dark' ? 'active' : ''" @click="setStoredTheme('dark')">
+							<i class="bi bi-moon-stars-fill me-2 opacity-50"></i>
+							Dark
+						</button>
+					</li>
+					<li>
+						<button type="button" class="dropdown-item d-flex align-items-center"
+							:class="theme == 'auto' ? 'active' : ''" @click="setStoredTheme('auto')">
+							<i class="bi bi-circle-half me-2 opacity-50"></i>
+							Auto
+						</button>
+					</li>
+				</ul>
+			</div>
+
+			<button class="btn btn-sm btn-outline-secondary float-end me-2" data-bs-toggle="modal"
+				data-bs-target="#EnableNotificationsModal" title="Enable browser notifications"
+				v-if="mailbox.connected && mailbox.notificationsSupported && !mailbox.notificationsEnabled">
+				<i class="bi bi-bell"></i>
+			</button>
+		</div>
+	</template>
+
+	<template v-else>
+		<!-- Modals -->
+		<div class="modal fade" id="AppInfoModal" tabindex="-1" aria-labelledby="AppInfoModalLabel" aria-hidden="true">
+			<div class="modal-dialog">
+				<div class="modal-content">
+					<div class="modal-header" v-if="mailbox.appInfo">
+						<h5 class="modal-title" id="AppInfoModalLabel">
+							Mailpit
+							<code>({{ mailbox.appInfo.Version }})</code>
+						</h5>
+						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+					</div>
+					<div class="modal-body">
+						<a class="btn btn-warning d-block mb-3"
+							v-if="mailbox.appInfo.Version != mailbox.appInfo.LatestVersion"
+							:href="'https://github.com/axllent/mailpit/releases/tag/' + mailbox.appInfo.LatestVersion">
+							A new version of Mailpit ({{ mailbox.appInfo.LatestVersion }}) is available.
+						</a>
+
+						<div class="row g-3">
+							<div class="col-12">
+								<RouterLink to="/api/v1/" class="btn btn-primary w-100" target="_blank">
+									<i class="bi bi-braces"></i>
+									OpenAPI / Swagger API documentation
+								</RouterLink>
+							</div>
+							<div class="col-sm-6">
+								<a class="btn btn-primary w-100" href="https://github.com/axllent/mailpit" target="_blank">
+									<i class="bi bi-github"></i>
+									Github
+								</a>
+							</div>
+							<div class="col-sm-6">
+								<a class="btn btn-primary w-100" href="https://github.com/axllent/mailpit/wiki"
+									target="_blank">
+									Documentation
+								</a>
+							</div>
+							<div class="col-6">
+								<div class="card border-secondary text-center">
+									<div class="card-header">Database size</div>
+									<div class="card-body text-secondary">
+										<h5 class="card-title">{{ getFileSize(mailbox.appInfo.DatabaseSize) }} </h5>
+									</div>
+								</div>
+							</div>
+							<div class="col-6">
+								<div class="card border-secondary text-center">
+									<div class="card-header">RAM usage</div>
+									<div class="card-body text-secondary">
+										<h5 class="card-title">{{ getFileSize(mailbox.appInfo.Memory) }} </h5>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="modal fade" id="EnableNotificationsModal" tabindex="-1" aria-labelledby="EnableNotificationsModalLabel"
+			aria-hidden="true">
+			<div class="modal-dialog modal-lg">
+				<div class="modal-content">
+					<div class="modal-header">
+						<h5 class="modal-title" id="EnableNotificationsModalLabel">Enable browser notifications?</h5>
+						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+					</div>
+					<div class="modal-body">
+						<p class="h4">Get browser notifications when Mailpit receives new messages?</p>
+						<p>
+							Note that your browser will ask you for confirmation when you click
+							<code>enable notifications</code>,
+							and that you must have Mailpit open in a browser tab to be able to receive the notifications.
+						</p>
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+						<button type="button" class="btn btn-success" data-bs-dismiss="modal"
+							v-on:click="requestNotifications">Enable notifications</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</template>
+
+	<AjaxLoader :loading="loading" />
+</template>
--- a/server/ui-src/components/AjaxLoader.vue
+++ b/server/ui-src/components/AjaxLoader.vue
@@ -0,0 +1,17 @@
+<script>
+export default {
+	props: {
+		loading: Number,
+	},
+}
+</script>
+
+<template>
+	<div class="loader" v-if="loading > 0">
+		<div class="d-flex justify-content-center align-items-center h-100">
+			<div class="spinner-border text-secondary" role="status">
+				<span class="visually-hidden">Loading...</span>
+			</div>
+		</div>
+	</div>
+</template>
--- a/server/ui-src/components/ListMessages.vue
+++ b/server/ui-src/components/ListMessages.vue
@@ -0,0 +1,172 @@
+<script>
+import { mailbox } from '../stores/mailbox'
+import CommonMixins from '../mixins/CommonMixins'
+import moment from 'moment'
+
+export default {
+	mixins: [
+		CommonMixins
+	],
+
+	props: {
+		loadingMessages: Number, // use different name to `loading` as that is already in use in CommonMixins
+	},
+
+	data() {
+		return {
+			mailbox,
+		}
+	},
+
+	mounted() {
+		moment.updateLocale('en', {
+			relativeTime: {
+				future: "in %s",
+				past: "%s ago",
+				s: 'seconds',
+				ss: '%d secs',
+				m: "a minute",
+				mm: "%d mins",
+				h: "an hour",
+				hh: "%d hours",
+				d: "a day",
+				dd: "%d days",
+				w: "a week",
+				ww: "%d weeks",
+				M: "a month",
+				MM: "%d months",
+				y: "a year",
+				yy: "%d years"
+			}
+		})
+	},
+
+	methods: {
+		getRelativeCreated: function (message) {
+			let d = new Date(message.Created)
+			return moment(d).fromNow().toString()
+		},
+
+		getPrimaryEmailTo: function (message) {
+			for (let i in message.To) {
+				return message.To[i].Address
+			}
+
+			return '[ Undisclosed recipients ]'
+		},
+
+		isSelected: function (id) {
+			return mailbox.selected.indexOf(id) != -1
+		},
+
+		toggleSelected: function (e, id) {
+			e.preventDefault()
+
+			if (this.isSelected(id)) {
+				mailbox.selected = mailbox.selected.filter(function (ele) {
+					return ele != id
+				})
+			} else {
+				mailbox.selected.push(id)
+			}
+		},
+
+		selectRange: function (e, id) {
+			e.preventDefault()
+
+			let selecting = false
+			let lastSelected = mailbox.selected.length > 0 && mailbox.selected[mailbox.selected.length - 1]
+			if (lastSelected == id) {
+				mailbox.selected = mailbox.selected.filter(function (ele) {
+					return ele != id
+				})
+				return
+			}
+
+			if (lastSelected === false) {
+				mailbox.selected.push(id)
+				return
+			}
+
+			for (let d of mailbox.messages) {
+				if (selecting) {
+					if (!this.isSelected(d.ID)) {
+						mailbox.selected.push(d.ID)
+					}
+					if (d.ID == lastSelected || d.ID == id) {
+						// reached backwards select
+						break
+					}
+				} else if (d.ID == id || d.ID == lastSelected) {
+					if (!this.isSelected(d.ID)) {
+						mailbox.selected.push(d.ID)
+					}
+					selecting = true
+				}
+			}
+		},
+	}
+}
+</script>
+
+<template>
+	<template v-if="mailbox.messages && mailbox.messages.length">
+		<div class="list-group my-2">
+			<RouterLink v-for="message in mailbox.messages" :to="'/view/' + message.ID" :key="message.ID" :id="message.ID"
+				class="row gx-1 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' : ''"
+				v-on:click.ctrl="toggleSelected($event, message.ID)" v-on:click.shift="selectRange($event, message.ID)">
+				<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>
+					<div class="text-truncate d-none d-lg-block privacy">
+						<b v-if="message.From" :title="message.From.Address">{{
+							message.From.Name ?
+							message.From.Name : message.From.Address
+						}}</b>
+					</div>
+					<div class="d-none d-lg-block text-truncate text-muted small privacy">
+						{{ getPrimaryEmailTo(message) }}
+						<span v-if="message.To && message.To.length > 1">
+							[+{{ message.To.length - 1 }}]
+						</span>
+					</div>
+				</div>
+				<div class="col-lg-6 col-xxl-7 mt-2 mt-lg-0">
+					<div><b>{{ message.Subject != "" ? message.Subject : "[ no subject ]" }}</b></div>
+					<div>
+						<RouterLink class="badge me-1" v-for="t in message.Tags" :to="'/search?q=' + tagEncodeURI(t)"
+							:style="mailbox.showTagColors ? { backgroundColor: colorHash(t) } : { backgroundColor: '#6c757d' }"
+							:title="'Filter messages tagged with ' + t">
+							{{ t }}
+						</RouterLink>
+					</div>
+				</div>
+				<div class="d-none d-lg-block col-1 small text-end text-muted">
+					<i class="bi bi-paperclip float-start h6" v-if="message.Attachments"></i>
+					{{ getFileSize(message.Size) }}
+				</div>
+				<div class="d-none d-lg-block col-2 col-xxl-1 small text-end text-muted">
+					{{ getRelativeCreated(message) }}
+				</div>
+			</RouterLink>
+		</div>
+	</template>
+	<template v-else>
+		<p class="text-center mt-5">
+			<span v-if="loadingMessages > 0" class="text-secondary">
+				Loading messages...
+			</span>
+			<template v-else-if="getSearch()">No results for <code>{{ getSearch() }}</code></template>
+			<template v-else>No messages in your mailbox</template>
+		</p>
+	</template>
+</template>
--- a/server/ui-src/components/NavMailbox.vue
+++ b/server/ui-src/components/NavMailbox.vue
@@ -0,0 +1,139 @@
+<script>
+import NavSelected from '../components/NavSelected.vue'
+import AjaxLoader from "./AjaxLoader.vue"
+import CommonMixins from '../mixins/CommonMixins'
+import { mailbox } from '../stores/mailbox'
+import { pagination } from '../stores/pagination'
+
+export default {
+	mixins: [CommonMixins],
+
+	components: {
+		NavSelected,
+		AjaxLoader,
+	},
+
+	props: {
+		modals: {
+			type: Boolean,
+			default: false,
+		}
+	},
+
+	emits: ['loadMessages'],
+
+	data() {
+		return {
+			mailbox,
+			pagination,
+		}
+	},
+
+	methods: {
+		reloadInbox: function () {
+			pagination.start = 0
+			this.loadMessages()
+		},
+
+
+		loadMessages: function () {
+			this.hideNav() // hide mobile menu
+			this.$emit('loadMessages')
+		},
+
+		markAllRead: function () {
+			let self = this
+			self.put(self.resolve(`/api/v1/messages`), { 'read': true }, function (response) {
+				window.scrollInPlace = true
+				self.loadMessages()
+			})
+		},
+
+		deleteAllMessages: function () {
+			let self = this
+			self.delete(self.resolve(`/api/v1/messages`), false, function (response) {
+				pagination.start = 0
+				self.loadMessages()
+			})
+		}
+	}
+}
+</script>
+
+<template>
+	<template v-if="!modals">
+		<div class="list-group my-2">
+			<button @click="reloadInbox" class="list-group-item list-group-item-action active">
+				<i class="bi bi-envelope-fill me-1" v-if="mailbox.connected"></i>
+				<i class="bi bi-arrow-clockwise me-1" v-else></i>
+				<span class="ms-1">Inbox</span>
+				<span class="badge rounded-pill ms-1 float-end text-bg-secondary" title="Unread messages"
+					v-if="mailbox.unread">
+					{{ formatNumber(mailbox.unread) }}
+				</span>
+			</button>
+
+			<template v-if="!mailbox.selected.length">
+				<button class="list-group-item list-group-item-action" data-bs-toggle="modal"
+					data-bs-target="#MarkAllReadModal" :disabled="!mailbox.unread">
+					<i class="bi bi-eye-fill me-1"></i>
+					Mark all read
+				</button>
+
+				<button class="list-group-item list-group-item-action" data-bs-toggle="modal"
+					data-bs-target="#DeleteAllModal" :disabled="!mailbox.count">
+					<i class="bi bi-trash-fill me-1 text-danger"></i>
+					Delete all
+				</button>
+			</template>
+
+			<NavSelected @loadMessages="loadMessages" />
+		</div>
+	</template>
+
+	<template v-else>
+		<!-- Modals -->
+		<div class="modal fade" id="MarkAllReadModal" tabindex="-1" aria-labelledby="MarkAllReadModalLabel"
+			aria-hidden="true">
+			<div class="modal-dialog">
+				<div class="modal-content">
+					<div class="modal-header">
+						<h5 class="modal-title" id="MarkAllReadModalLabel">Mark all messages as read?</h5>
+						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+					</div>
+					<div class="modal-body">
+						This will mark {{ formatNumber(mailbox.unread) }}
+						message<span v-if="mailbox.unread > 1">s</span> as read.
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+						<button type="button" class="btn btn-success" data-bs-dismiss="modal"
+							v-on:click="markAllRead">Confirm</button>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="modal fade" id="DeleteAllModal" tabindex="-1" aria-labelledby="DeleteAllModalLabel" aria-hidden="true">
+			<div class="modal-dialog">
+				<div class="modal-content">
+					<div class="modal-header">
+						<h5 class="modal-title" id="DeleteAllModalLabel">Delete all messages?</h5>
+						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+					</div>
+					<div class="modal-body">
+						This will permanently delete {{ formatNumber(mailbox.count) }}
+						message<span v-if="mailbox.count > 1">s</span>.
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+						<button type="button" class="btn btn-danger" data-bs-dismiss="modal"
+							v-on:click="deleteAllMessages">Delete</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</template>
+
+	<AjaxLoader :loading="loading" />
+</template>
--- a/server/ui-src/components/NavSearch.vue
+++ b/server/ui-src/components/NavSearch.vue
@@ -0,0 +1,103 @@
+<script>
+import NavSelected from '../components/NavSelected.vue'
+import AjaxLoader from './AjaxLoader.vue'
+import CommonMixins from '../mixins/CommonMixins'
+import { mailbox } from '../stores/mailbox'
+import { pagination } from '../stores/pagination'
+
+export default {
+	mixins: [CommonMixins],
+
+	components: {
+		NavSelected,
+		AjaxLoader,
+	},
+
+	props: {
+		modals: {
+			type: Boolean,
+			default: false,
+		}
+	},
+
+	emits: ['loadMessages'],
+
+	data() {
+		return {
+			mailbox,
+			pagination,
+		}
+	},
+
+	methods: {
+		loadMessages: function () {
+			this.hideNav() // hide mobile menu
+			this.$emit('loadMessages')
+		},
+
+		deleteAllMessages: function () {
+			let s = this.getSearch()
+			if (!s) {
+				return
+			}
+
+			let self = this
+
+			let uri = this.resolve(`/api/v1/search`) + '?query=' + encodeURIComponent(s)
+			this.delete(uri, false, function (response) {
+				self.$router.push('/')
+			})
+		}
+	}
+}
+</script>
+
+<template>
+	<template v-if="!modals">
+		<div class="list-group my-2">
+			<RouterLink to="/" class="list-group-item list-group-item-action" @click="pagination.start = 0">
+				<i class="bi bi-arrow-return-left me-1"></i>
+				<span class="ms-1">Inbox</span>
+				<span class="badge rounded-pill ms-1 float-end text-bg-secondary" title="Unread messages"
+					v-if="mailbox.unread">
+					{{ formatNumber(mailbox.unread) }}
+				</span>
+			</RouterLink>
+			<template v-if="!mailbox.selected.length">
+				<button class="list-group-item list-group-item-action" data-bs-toggle="modal"
+					data-bs-target="#DeleteAllModal" :disabled="!mailbox.count">
+					<i class="bi bi-trash-fill me-1 text-danger"></i>
+					Delete all
+				</button>
+			</template>
+
+			<NavSelected @loadMessages="loadMessages" />
+		</div>
+	</template>
+
+	<template v-else>
+		<!-- Modals -->
+		<div class="modal fade" id="DeleteAllModal" tabindex="-1" aria-labelledby="DeleteAllModalLabel" aria-hidden="true">
+			<div class="modal-dialog">
+				<div class="modal-content">
+					<div class="modal-header">
+						<h5 class="modal-title" id="DeleteAllModalLabel">Delete all messages matching search?</h5>
+						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+					</div>
+					<div class="modal-body">
+						This will permanently delete {{ formatNumber(mailbox.count) }}
+						message<span v-if="mailbox.count > 1">s</span> matching
+						<code>{{ getSearch() }}</code>
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+						<button type="button" class="btn btn-danger" data-bs-dismiss="modal"
+							v-on:click="deleteAllMessages">Delete</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</template>
+
+	<AjaxLoader :loading="loading" />
+</template>
--- a/server/ui-src/components/NavSelected.vue
+++ b/server/ui-src/components/NavSelected.vue
@@ -0,0 +1,120 @@
+<script>
+import AjaxLoader from './AjaxLoader.vue'
+import CommonMixins from '../mixins/CommonMixins'
+import { mailbox } from '../stores/mailbox'
+
+export default {
+    mixins: [CommonMixins],
+
+    components: {
+        AjaxLoader,
+    },
+
+    emits: ['loadMessages'],
+
+    data() {
+        return {
+            mailbox,
+        }
+    },
+
+    methods: {
+        loadMessages: function () {
+            this.$emit('loadMessages')
+        },
+
+        // mark selected messages as read
+        markSelectedRead: function () {
+            let self = this
+            if (!mailbox.selected.length) {
+                return false
+            }
+            self.put(self.resolve(`/api/v1/messages`), { 'read': true, 'ids': mailbox.selected }, function (response) {
+                window.scrollInPlace = true
+                self.loadMessages()
+            })
+        },
+
+        isSelected: function (id) {
+            return mailbox.selected.indexOf(id) != -1
+        },
+
+        // mark selected messages as unread
+        markSelectedUnread: function () {
+            let self = this
+            if (!mailbox.selected.length) {
+                return false
+            }
+            self.put(self.resolve(`/api/v1/messages`), { 'read': false, 'ids': mailbox.selected }, function (response) {
+                window.scrollInPlace = true
+                self.loadMessages()
+            })
+        },
+
+        // universal handler to delete current or selected messages
+        deleteMessages: function () {
+            let ids = []
+            let self = this
+            ids = JSON.parse(JSON.stringify(mailbox.selected))
+            if (!ids.length) {
+                return false
+            }
+            self.delete(self.resolve(`/api/v1/messages`), { 'ids': ids }, function (response) {
+                window.scrollInPlace = true
+                self.loadMessages()
+            })
+        },
+
+        // test if any selected emails are unread
+        selectedHasUnread: function () {
+            if (!mailbox.selected.length) {
+                return false
+            }
+            for (let i in mailbox.messages) {
+                if (this.isSelected(mailbox.messages[i].ID) && !mailbox.messages[i].Read) {
+                    return true
+                }
+            }
+            return false
+        },
+
+        // test of any selected emails are read
+        selectedHasRead: function () {
+            if (!mailbox.selected.length) {
+                return false
+            }
+            for (let i in mailbox.messages) {
+                if (this.isSelected(mailbox.messages[i].ID) && mailbox.messages[i].Read) {
+                    return true
+                }
+            }
+            return false
+        },
+    }
+}
+</script>
+
+<template>
+    <template v-if="mailbox.selected.length">
+        <button class="list-group-item list-group-item-action" :disabled="!selectedHasUnread()"
+            v-on:click="markSelectedRead">
+            <i class="bi bi-eye-fill me-1"></i>
+            Mark read
+        </button>
+        <button class="list-group-item list-group-item-action" :disabled="!selectedHasRead()"
+            v-on:click="markSelectedUnread">
+            <i class="bi bi-eye-slash me-1"></i>
+            Mark unread
+        </button>
+        <button class="list-group-item list-group-item-action" v-on:click="deleteMessages()">
+            <i class="bi bi-trash-fill me-1 text-danger"></i>
+            Delete selected
+        </button>
+        <button class="list-group-item list-group-item-action" v-on:click="mailbox.selected = []">
+            <i class="bi bi-x-circle me-1"></i>
+            Cancel selection
+        </button>
+    </template>
+
+    <AjaxLoader :loading="loading" />
+</template>
--- a/server/ui-src/components/NavTags.vue
+++ b/server/ui-src/components/NavTags.vue
@@ -0,0 +1,55 @@
+<script>
+import CommonMixins from '../mixins/CommonMixins'
+import { mailbox } from '../stores/mailbox'
+
+export default {
+	mixins: [CommonMixins],
+
+	data() {
+		return {
+			mailbox,
+		}
+	},
+
+	methods: {
+		inSearch: function (tag) {
+			const urlParams = new URLSearchParams(window.location.search)
+			const query = urlParams.get('q')
+			if (!query) {
+				return false
+			}
+
+			let re = new RegExp(`\\b[^\-!]tag:"?${tag}"?\\b`, 'i')
+			return query.match(re)
+		}
+	}
+}
+</script>
+
+<template>
+	<template v-if="mailbox.tags && mailbox.tags.length">
+		<div class="mt-4 text-muted">
+			<button class="btn btn-sm dropdown-toggle ms-n1" data-bs-toggle="dropdown" aria-expanded="false">
+				Tags
+			</button>
+			<ul class="dropdown-menu dropdown-menu-end">
+				<li>
+					<button class="dropdown-item" @click="mailbox.showTagColors = !mailbox.showTagColors">
+						<template v-if="mailbox.showTagColors">Hide</template>
+						<template v-else>Show</template>
+						tag colors
+					</button>
+				</li>
+			</ul>
+		</div>
+		<div class="list-group mt-1 mb-5 pb-3">
+			<RouterLink v-for="tag in mailbox.tags" :to="'/search?q=' + tagEncodeURI(tag)" @click="hideNav"
+				:style="mailbox.showTagColors ? { borderLeftColor: colorHash(tag), borderLeftWidth: '4px' } : ''"
+				class="list-group-item list-group-item-action small px-2" :class="inSearch(tag) ? 'active' : ''">
+				<i class="bi bi-tag-fill" v-if="inSearch(tag)"></i>
+				<i class="bi bi-tag" v-else></i>
+				{{ tag }}
+			</RouterLink>
+		</div>
+	</template>
+</template>
--- a/server/ui-src/components/Notifications.vue
+++ b/server/ui-src/components/Notifications.vue
@@ -0,0 +1,176 @@
+<script>
+import CommonMixins from '../mixins/CommonMixins'
+import { Toast } from 'bootstrap'
+import { mailbox } from '../stores/mailbox'
+import { pagination } from '../stores/pagination'
+
+export default {
+	mixins: [CommonMixins],
+
+	data() {
+		return {
+			pagination,
+			mailbox,
+			toastMessage: false,
+			reconnectRefresh: false,
+			socketURI: false,
+			pauseNotifications: false, // prevent spamming
+		}
+	},
+
+	mounted() {
+		let proto = location.protocol == 'https:' ? 'wss' : 'ws'
+		this.socketURI = proto + "://" + document.location.host + this.resolve(`/api/events`)
+
+		this.connect()
+
+		mailbox.notificationsSupported = window.isSecureContext
+			&& ("Notification" in window && Notification.permission !== "denied")
+		mailbox.notificationsEnabled = mailbox.notificationsSupported && Notification.permission == "granted"
+	},
+
+	methods: {
+		// websocket connect
+		connect: function () {
+			let ws = new WebSocket(this.socketURI)
+			let self = this
+			ws.onmessage = function (e) {
+				let response = JSON.parse(e.data)
+				if (!response) {
+					return
+				}
+				// new messages
+				if (response.Type == "new" && response.Data) {
+					if (!mailbox.searching) {
+						if (pagination.start < 1) {
+							// push results directly into first page
+							mailbox.messages.unshift(response.Data)
+							if (mailbox.messages.length > pagination.limit) {
+								mailbox.messages.pop()
+							}
+						} else {
+							// update pagination offset
+							pagination.start++
+						}
+					}
+
+					for (let i in response.Data.Tags) {
+						if (mailbox.tags.indexOf(response.Data.Tags[i]) < 0) {
+							mailbox.tags.push(response.Data.Tags[i])
+							mailbox.tags.sort()
+						}
+					}
+
+					// send notifications
+					if (!self.pauseNotifications) {
+						self.pauseNotifications = true
+						let from = response.Data.From != null ? response.Data.From.Address : '[unknown]'
+						self.browserNotify("New mail from: " + from, response.Data.Subject)
+						self.setMessageToast(response.Data)
+						// delay notifications by 2s
+						window.setTimeout(() => { self.pauseNotifications = false }, 2000)
+					}
+				} else if (response.Type == "prune") {
+					// messages have been deleted, reload messages to adjust
+					window.scrollInPlace = true
+					mailbox.refresh = true // trigger refresh
+					window.setTimeout(() => { mailbox.refresh = false }, 500)
+				} else if (response.Type == "stats" && response.Data) {
+					// refresh mailbox stats
+					mailbox.total = response.Data.Total
+					mailbox.unread = response.Data.Unread
+				}
+			}
+
+			ws.onopen = function () {
+				mailbox.connected = true
+				if (self.reconnectRefresh) {
+					self.reconnectRefresh = false
+					mailbox.refresh = true // trigger refresh
+					window.setTimeout(() => { mailbox.refresh = false }, 500)
+				}
+			}
+
+			ws.onclose = function (e) {
+				mailbox.connected = false
+				self.reconnectRefresh = true
+
+				setTimeout(function () {
+					self.connect() // reconnect
+				}, 1000)
+			}
+
+			ws.onerror = function (err) {
+				ws.close()
+			}
+		},
+
+		browserNotify: function (title, message) {
+			if (!("Notification" in window)) {
+				return
+			}
+
+			if (Notification.permission === "granted") {
+				let b = message.Subject
+				let options = {
+					body: message,
+					icon: this.resolve('/notification.png')
+				}
+				new Notification(title, options)
+			}
+		},
+
+		setMessageToast: function (m) {
+			// don't display if browser notifications are enabled, or a toast is already displayed
+			if (mailbox.notificationsEnabled || this.toastMessage) {
+				return
+			}
+
+			this.toastMessage = m
+
+			let self = this
+			let el = document.getElementById('messageToast')
+			if (el) {
+				el.addEventListener('hidden.bs.toast', () => {
+					self.toastMessage = false
+				})
+
+				Toast.getOrCreateInstance(el).show()
+			}
+		},
+
+		closeToast: function () {
+			let el = document.getElementById('messageToast')
+			if (el) {
+				Toast.getOrCreateInstance(el).hide()
+			}
+		},
+	},
+}
+</script>
+
+<template>
+	<div class="toast-container position-fixed bottom-0 end-0 p-3">
+		<div id="messageToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+			<div class="toast-header" v-if="toastMessage">
+				<i class="bi bi-envelope-exclamation-fill me-2"></i>
+				<strong class="me-auto">
+					<RouterLink :to="'/view/' + toastMessage.ID" @click="closeToast">New message</RouterLink>
+				</strong>
+				<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+			</div>
+
+			<div class="toast-body">
+				<div>
+					<RouterLink :to="'/view/' + toastMessage.ID" class="d-block text-truncate text-body-secondary"
+						@click="closeToast">
+						<template v-if="toastMessage.Subject != ''">{{ toastMessage.Subject }}</template>
+						<template v-else>
+							[ no subject ]
+						</template>
+					</RouterLink>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
--- a/server/ui-src/components/Pagination.vue
+++ b/server/ui-src/components/Pagination.vue
@@ -0,0 +1,92 @@
+<script>
+import CommonMixins from '../mixins/CommonMixins'
+import { mailbox } from '../stores/mailbox'
+import { pagination } from '../stores/pagination'
+
+export default {
+
+	mixins: [CommonMixins],
+
+	props: {
+		total: Number,
+	},
+
+	emits: ['loadMessages'],
+
+	data() {
+		return {
+			pagination,
+			mailbox,
+		}
+	},
+
+	computed: {
+		canPrev: function () {
+			return pagination.start > 0
+		},
+
+		canNext: function () {
+			return this.total > (pagination.start + mailbox.messages.length)
+		},
+
+		// returns the number of next X messages
+		nextMessages: function () {
+			let t = pagination.start + parseInt(pagination.limit, 10)
+			if (t > this.total) {
+				t = this.total
+			}
+
+			return t
+		},
+	},
+
+	methods: {
+		changeLimit: function () {
+			pagination.start = 0
+			this.$emit('loadMessages')
+		},
+
+		viewNext: function () {
+			pagination.start = parseInt(pagination.start, 10) + parseInt(pagination.limit, 10)
+			this.$emit('loadMessages')
+		},
+
+		viewPrev: function () {
+			let s = pagination.start - pagination.limit
+			if (s < 0) {
+				s = 0
+			}
+			pagination.start = s
+			this.$emit('loadMessages')
+		},
+	}
+}
+
+</script>
+<template>
+	<select v-model="pagination.limit" @change="changeLimit" class="form-select form-select-sm d-inline w-auto me-2"
+		:disabled="total == 0">
+		<option value="25">25</option>
+		<option value="50">50</option>
+		<option value="100">100</option>
+		<option value="200">200</option>
+	</select>
+
+	<small>
+		<template v-if="total > 0">
+			{{ formatNumber(pagination.start + 1) }}-{{ formatNumber(nextMessages) }}
+			<small>of</small>
+			{{ formatNumber(total) }}
+		</template>
+		<span v-else class="text-muted">0 of 0</span>
+	</small>
+
+	<button class="btn btn-outline-light ms-2 me-1" :disabled="!canPrev" v-on:click="viewPrev"
+		:title="'View previous ' + pagination.limit + ' messages'">
+		<i class="bi bi-caret-left-fill"></i>
+	</button>
+	<button class="btn btn-outline-light" :disabled="!canNext" v-on:click="viewNext"
+		:title="'View next ' + pagination.limit + ' messages'">
+		<i class="bi bi-caret-right-fill"></i>
+	</button>
+</template>
--- a/server/ui-src/components/SearchForm.vue
+++ b/server/ui-src/components/SearchForm.vue
@@ -0,0 +1,64 @@
+<script>
+import CommonMixins from '../mixins/CommonMixins'
+import { pagination } from '../stores/pagination'
+
+export default {
+	mixins: [CommonMixins],
+
+	data() {
+		return {
+			search: '',
+			pagination
+		}
+	},
+
+	mounted() {
+		this.searchFromURL()
+	},
+
+	watch: {
+		$route() {
+			this.searchFromURL()
+		}
+	},
+
+	methods: {
+		searchFromURL: function () {
+			const urlParams = new URLSearchParams(window.location.search)
+			this.search = urlParams.get('q') ? urlParams.get('q') : ''
+		},
+
+		doSearch: function (e) {
+			pagination.start = 0
+			if (this.search == '') {
+				this.$router.push('/')
+			} else {
+				this.$router.push('/search?q=' + encodeURIComponent(this.search))
+			}
+
+			e.preventDefault()
+		},
+
+		resetSearch: function () {
+			this.search = ''
+			this.$router.push('/')
+		}
+	}
+}
+</script>
+
+<template>
+	<form v-on:submit="doSearch">
+		<div class="input-group flex-nowrap">
+			<div class="ms-md-2 d-flex border bg-body rounded-start flex-fill position-relative">
+				<input type="text" class="form-control border-0" aria-label="Search" v-model.trim="search"
+					placeholder="Search mailbox">
+				<span class="btn btn-link position-absolute end-0 text-muted" v-if="search != ''"
+					v-on:click="resetSearch"><i class="bi bi-x-circle"></i></span>
+			</div>
+			<button class="btn btn-outline-secondary" type="submit">
+				<i class="bi bi-search"></i>
+			</button>
+		</div>
+	</form>
+</template>
--- a/server/ui-src/components/message/Attachments.vue
+++ b/server/ui-src/components/message/Attachments.vue
@@ -1,6 +1,6 @@

 <script>
-import commonMixins from '../mixins.js';
+import commonMixins from '../../mixins/CommonMixins'

 export default {
 	props: {
@@ -14,9 +14,9 @@ export default {

 <template>
 	<div class="mt-4 border-top pt-4">
-		<a v-for="part in attachments" :href="'api/v1/message/' + message.ID + '/part/' + part.PartID"
+		<a v-for="part in attachments" :href="resolve('/api/v1/message/' + 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/v1/message/' + message.ID + '/part/' + part.PartID + '/thumb'"
+			<img v-if="isImage(part)" :src="resolve('/api/v1/message/' + message.ID + '/part/' + part.PartID + '/thumb')"
 				class="card-img-top" alt="">
 			<img v-else
 				src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAB4AQMAAABhKUq+AAAAA1BMVEX///+nxBvIAAAAGUlEQVQYGe3BgQAAAADDoPtTT+EA1QAAgFsLQAAB12s2WgAAAABJRU5ErkJggg=="
--- a/server/ui-src/components/message/HTMLCheck.vue
+++ b/server/ui-src/components/message/HTMLCheck.vue
@@ -1,7 +1,7 @@
 <script>
-import axios from 'axios'
 import Donut from 'vue-css-donut-chart/src/components/Donut.vue'
-import commonMixins from '../mixins.js'
+import axios from 'axios'
+import commonMixins from '../../mixins/CommonMixins'
 import { Tooltip } from 'bootstrap'

 export default {
@@ -225,7 +225,7 @@ export default {
 			let self = this

 			// ignore any error, do not show loader
-			axios.get('api/v1/message/' + self.message.ID + '/html-check', null)
+			axios.get(self.resolve('/api/v1/message/' + self.message.ID + '/html-check'), null)
 				.then(function (result) {
 					self.check = result.data
 					self.error = false
--- a/server/ui-src/components/message/Headers.vue
+++ b/server/ui-src/components/message/Headers.vue
@@ -1,6 +1,6 @@

 <script>
-import commonMixins from '../mixins.js'
+import commonMixins from '../../mixins/CommonMixins'

 export default {
    props: {
@@ -17,7 +17,7 @@ export default {

    mounted() {
        let self = this;
-        let uri = 'api/v1/message/' + self.message.ID + '/headers'
+        let uri = self.resolve('/api/v1/message/' + self.message.ID + '/headers')
        self.get(uri, false, function (response) {
            self.headers = response.data
        });
@@ -28,10 +28,10 @@ export default {

 <template>
    <div v-if="headers" class="small">
-        <div v-for="vals, k in headers" class="row mb-2 pb-2 border-bottom w-100">
+        <div v-for="values, k in headers" class="row mb-2 pb-2 border-bottom w-100">
            <div class="col-md-4 col-lg-3 col-xl-2 mb-2"><b>{{ k }}</b></div>
            <div class="col-md-8 col-lg-9 col-xl-10 text-body-secondary">
-                <div v-for="x in vals" class="mb-2 text-break">{{ x }}</div>
+                <div v-for="x in values" class="mb-2 text-break">{{ x }}</div>
            </div>
        </div>
    </div>
--- a/server/ui-src/components/message/LinkCheck.vue
+++ b/server/ui-src/components/message/LinkCheck.vue
@@ -1,6 +1,6 @@
 <script>
 import axios from 'axios'
-import commonMixins from '../mixins.js'
+import commonMixins from '../../mixins/CommonMixins'

 export default {
 	props: {
@@ -116,13 +116,13 @@ export default {
 	methods: {
 		doCheck: function () {
 			this.check = false
-			let self = this
 			this.loading = true
-			let uri = 'api/v1/message/' + self.message.ID + '/link-check'
+			let uri = this.resolve('/api/v1/message/' + this.message.ID + '/link-check')
 			if (this.followRedirects) {
 				uri += '?follow=true'
 			}

+			let self = this
 			// ignore any error, do not show loader
 			axios.get(uri, null)
 				.then(function (result) {
--- a/server/ui-src/components/message/Message.vue
+++ b/server/ui-src/components/message/Message.vue
@@ -1,18 +1,17 @@

 <script>
-import commonMixins from '../mixins.js'
-import Prism from "prismjs"
-import Tags from "bootstrap5-tags"
 import Attachments from './Attachments.vue'
+import HTMLCheck from './HTMLCheck.vue'
 import Headers from './Headers.vue'
-import HTMLCheck from './MessageHTMLCheck.vue'
-import LinkCheck from './MessageLinkCheck.vue'
+import LinkCheck from './LinkCheck.vue'
+import Prism from 'prismjs'
+import Tags from 'bootstrap5-tags'
+import commonMixins from '../../mixins/CommonMixins'
+import { mailbox } from '../../stores/mailbox'

 export default {
 	props: {
 		message: Object,
-		existingTags: Array,
-		uiConfig: Object
 	},

 	components: {
@@ -26,12 +25,11 @@ export default {

 	data() {
 		return {
+			mailbox,
 			srcURI: false,
 			iframes: [], // for resizing
-			showTags: false, // to force re-rendering of component
 			canSaveTags: false, // prevent auto-saving tags on render
 			messageTags: [],
-			allTags: [],
 			loadHeaders: false,
 			htmlScore: false,
 			htmlScoreColor: false,
@@ -67,9 +65,7 @@ export default {

 	mounted() {
 		let self = this
-		self.showTags = false
 		self.canSaveTags = false
-		self.allTags = self.existingTags
 		self.messageTags = self.message.Tags
 		self.renderUI()

@@ -82,12 +78,13 @@ export default {

 		let rawTab = document.getElementById('nav-raw-tab')
 		rawTab.addEventListener('shown.bs.tab', function (event) {
-			self.srcURI = 'api/v1/message/' + self.message.ID + '/raw'
+			self.srcURI = self.resolve('/api/v1/message/' + self.message.ID + '/raw')
 			self.resizeIFrames()
 		})

-		self.showTags = true
-		self.$nextTick(function () {
+		// manually refresh tags
+		self.get(self.resolve(`/api/v1/tags`), false, function (response) {
+			mailbox.tags = response.data
 			self.$nextTick(function () {
 				Tags.init('select[multiple]')
 				// delay tag change detection to allow Tags to load
@@ -188,8 +185,8 @@ export default {
 				tags: this.messageTags
 			}

-			self.put('api/v1/tags', data, function (response) {
-				self.scrollInPlace = true
+			self.put(self.resolve('/api/v1/tags'), data, function (response) {
+				window.scrollInPlace = true
 				self.$emit('loadMessages')
 			})
 		},
@@ -235,7 +232,9 @@ export default {
 								<span v-if="message.From">
 									<span v-if="message.From.Name">{{ message.From.Name + " " }}</span>
 									<span v-if="message.From.Address" class="small">
-										&lt;{{ message.From.Address }}&gt;
+										&lt;<a :href="searchURI(message.From.Address)" class="text-body">
+											{{ message.From.Address }}
+										</a>&gt;
 									</span>
 								</span>
 								<span v-else>
@@ -248,7 +247,12 @@ export default {
 							<td class="privacy">
 								<span v-if="message.To && message.To.length" v-for="(t, i) in message.To">
 									<template v-if="i > 0">, </template>
-									<span class="text-nowrap">{{ t.Name + " &lt;" + t.Address + "&gt;" }}</span>
+									<span>
+										{{ t.Name }}
+										&lt;<a :href="searchURI(t.Address)" class="text-body">
+											{{ t.Address }}
+										</a>&gt;
+									</span>
 								</span>
 								<span v-else class="text-body-secondary">[Undisclosed recipients]</span>
 							</td>
@@ -258,7 +262,11 @@ export default {
 							<td class="privacy">
 								<span v-for="(t, i) in message.Cc">
 									<template v-if="i > 0">,</template>
-									{{ t.Name + " &lt;" + t.Address + "&gt;" }} </span>
+									{{ t.Name }}
+									&lt;<a :href="searchURI(t.Address)" class="text-body">
+										{{ t.Address }}
+									</a>&gt;
+								</span>
 							</td>
 						</tr>
 						<tr v-if="message.Bcc && message.Bcc.length" class="small">
@@ -266,21 +274,32 @@ export default {
 							<td class="privacy">
 								<span v-for="(t, i) in message.Bcc">
 									<template v-if="i > 0">,</template>
-									{{ t.Name + " &lt;" + t.Address + "&gt;" }}
+									{{ t.Name }}
+									&lt;<a :href="searchURI(t.Address)" class="text-body">
+										{{ t.Address }}
+									</a>&gt;
 								</span>
 							</td>
 						</tr>
 						<tr v-if="message.ReplyTo && message.ReplyTo.length" class="small">
 							<th class="text-nowrap">Reply-To</th>
-							<td class="privacy text-body-secondary">
+							<td class="privacy text-body-secondary text-break">
 								<span v-for="(t, i) in message.ReplyTo">
 									<template v-if="i > 0">,</template>
-									{{ t.Name + " &lt;" + t.Address + "&gt;" }} </span>
+									{{ t.Name }}
+									&lt;<a :href="searchURI(t.Address)" class="text-body-secondary">
+										{{ t.Address }}
+									</a>&gt;
+								</span>
 							</td>
 						</tr>
 						<tr v-if="message.ReturnPath && message.ReturnPath != message.From.Address" class="small">
 							<th class="text-nowrap">Return-Path</th>
-							<td class="privacy text-body-secondary">&lt;{{ message.ReturnPath }}&gt;</td>
+							<td class="privacy text-body-secondary text-break">
+								&lt;<a :href="searchURI(message.ReturnPath)" class="text-body-secondary">
+									{{ message.ReturnPath }}
+								</a>&gt;
+							</td>
 						</tr>
 						<tr>
 							<th class="small">Subject</th>
@@ -304,7 +323,7 @@ export default {
 									data-separator="|,|">
 									<option value="">Type a tag...</option>
 									<!-- you need at least one option with the placeholder -->
-									<option v-for="t in allTags" :value="t">{{ t }}</option>
+									<option v-for="t in mailbox.tags" :value="t">{{ t }}</option>
 								</select>
 								<div class="invalid-feedback">Invalid tag name</div>
 							</td>
@@ -362,7 +381,7 @@ export default {
 					role="tab" aria-controls="nav-raw" aria-selected="false">
 					Raw
 				</button>
-				<div class="dropdown d-lg-none">
+				<div class="dropdown d-xl-none">
 					<button class="nav-link dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
 						Checks
 					</button>
@@ -370,7 +389,7 @@ export default {
 						<li>
 							<button class="dropdown-item" id="nav-html-check-tab" data-bs-toggle="tab"
 								data-bs-target="#nav-html-check" type="button" role="tab" aria-controls="nav-html"
-								aria-selected="false" v-if="!uiConfig.DisableHTMLCheck && message.HTML != ''">
+								aria-selected="false" v-if="!mailbox.uiConfig.DisableHTMLCheck && message.HTML != ''">
 								HTML Check
 								<span class="badge rounded-pill p-1" :class="htmlScoreColor" v-if="htmlScore !== false">
 									<small>{{ Math.floor(htmlScore) }}%</small>
@@ -390,15 +409,15 @@ export default {
 						</li>
 					</ul>
 				</div>
-				<button class="d-none d-lg-inline-block nav-link position-relative" id="nav-html-check-tab"
+				<button class="d-none d-xl-inline-block nav-link position-relative" id="nav-html-check-tab"
 					data-bs-toggle="tab" data-bs-target="#nav-html-check" type="button" role="tab" aria-controls="nav-html"
-					aria-selected="false" v-if="!uiConfig.DisableHTMLCheck && message.HTML != ''">
+					aria-selected="false" v-if="!mailbox.uiConfig.DisableHTMLCheck && message.HTML != ''">
 					HTML Check
 					<span class="badge rounded-pill p-1" :class="htmlScoreColor" v-if="htmlScore !== false">
 						<small>{{ Math.floor(htmlScore) }}%</small>
 					</span>
 				</button>
-				<button class="d-none d-lg-inline-block nav-link" id="nav-link-check-tab" data-bs-toggle="tab"
+				<button class="d-none d-xl-inline-block nav-link" id="nav-link-check-tab" data-bs-toggle="tab"
 					data-bs-target="#nav-link-check" type="button" role="tab" aria-controls="nav-link-check"
 					aria-selected="false">
 					Link Check
@@ -449,7 +468,7 @@ export default {
 			</div>
 			<div class="tab-pane fade" id="nav-html-check" role="tabpanel" aria-labelledby="nav-html-check-tab"
 				tabindex="0">
-				<HTMLCheck v-if="!uiConfig.DisableHTMLCheck && message.HTML != ''" :message="message"
+				<HTMLCheck v-if="!mailbox.uiConfig.DisableHTMLCheck && message.HTML != ''" :message="message"
 					@setHtmlScore="(n) => htmlScore = n" @set-badge-style="(v) => htmlScoreColor = v" />
 			</div>
 			<div class="tab-pane fade" id="nav-link-check" role="tabpanel" aria-labelledby="nav-html-check-tab"
--- a/server/ui-src/components/message/Release.vue
+++ b/server/ui-src/components/message/Release.vue
@@ -0,0 +1,135 @@
+
+<script>
+import AjaxLoader from '../AjaxLoader.vue'
+import Tags from "bootstrap5-tags"
+import commonMixins from '../../mixins/CommonMixins'
+import { mailbox } from '../../stores/mailbox'
+
+export default {
+	props: {
+		message: Object,
+	},
+
+	components: {
+		AjaxLoader,
+	},
+
+	data() {
+		return {
+			addresses: [],
+			mailbox,
+			allAddresses: [],
+		}
+	},
+
+	mixins: [commonMixins],
+
+	mounted() {
+		let a = []
+		for (let i in this.message.To) {
+			a.push(this.message.To[i].Address)
+		}
+		for (let i in this.message.Cc) {
+			a.push(this.message.Cc[i].Address)
+		}
+		for (let i in this.message.Bcc) {
+			a.push(this.message.Bcc[i].Address)
+		}
+
+		// include only unique email addresses, regardless of casing
+		this.allAddresses = JSON.parse(JSON.stringify([...new Map(a.map(ad => [ad.toLowerCase(), ad])).values()]))
+
+		this.addresses = this.allAddresses
+	},
+
+	methods: {
+		// triggered manually after modal is shown
+		initTags: function () {
+			Tags.init("select[multiple]")
+		},
+
+		releaseMessage: function () {
+			let self = this
+			// set timeout to allow for user clicking send before the tag filter has applied the tag
+			window.setTimeout(function () {
+				if (!self.addresses.length) {
+					return false
+				}
+
+				let data = {
+					to: self.addresses
+				}
+
+				self.post(self.resolve('/api/v1/message/' + self.message.ID + '/release'), data, function (response) {
+					self.modal("ReleaseModal").hide()
+				})
+			}, 100)
+		}
+	}
+}
+</script>
+
+<template>
+	<div class="modal fade" id="ReleaseModal" tabindex="-1" aria-labelledby="AppInfoModalLabel" aria-hidden="true">
+		<div class="modal-dialog modal-lg" v-if="message">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h1 class="modal-title fs-5" id="AppInfoModalLabel">Release email</h1>
+					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+				</div>
+				<div class="modal-body">
+					<h6>Send this message to one or more addresses specified below.</h6>
+					<div class="row">
+						<label class="col-sm-2 col-form-label text-body-secondary">From</label>
+						<div class="col-sm-10">
+							<input type="text" aria-label="From address" readonly class="form-control-plaintext"
+								:value="message.From.Address">
+						</div>
+					</div>
+					<div class="row">
+						<label class=" col-sm-2 col-form-label text-body-secondary">Subject</label>
+						<div class="col-sm-10">
+							<input type="text" aria-label="Subject" readonly class="form-control-plaintext"
+								:value="message.Subject">
+						</div>
+					</div>
+					<div class="row mb-3">
+						<label class="col-sm-2 col-form-label text-body-secondary">Send to</label>
+						<div class="col-sm-10">
+							<select class="form-select tag-selector" v-model="addresses" multiple data-allow-new="true"
+								data-clear-end="true" data-allow-clear="true" data-placeholder="Enter email addresses..."
+								data-add-on-blur="true" data-badge-style="primary"
+								data-regex='^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$'
+								data-separator="|,|">
+								<option value="">Enter email addresses...</option>
+								<!-- you need at least one option with the placeholder -->
+								<option v-for="t in allAddresses" :value="t">{{ t }}</option>
+							</select>
+							<div class="invalid-feedback">Invalid email address</div>
+						</div>
+					</div>
+					<div class="form-text text-center" v-if="mailbox.uiConfig.MessageRelay.RecipientAllowlist != ''">
+						Note: A recipient allowlist has been configured. Any mail address not matching it will be rejected.
+						<br class="d-none d-md-inline">
+						Configured allowlist: <b>{{ mailbox.uiConfig.MessageRelay.RecipientAllowlist }}</b>
+					</div>
+					<div class="form-text text-center">
+						Note: For testing purposes, a unique Message-Id will be generated on send.
+						<br class="d-none d-md-inline">
+						SMTP delivery failures will bounce back to
+						<b v-if="mailbox.uiConfig.MessageRelay.ReturnPath != ''">{{ mailbox.uiConfig.MessageRelay.ReturnPath
+						}}</b>
+						<b v-else>{{ message.ReturnPath }}</b>.
+					</div>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+					<button type="button" class="btn btn-primary" :disabled="!addresses.length"
+						v-on:click="releaseMessage">Release</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<AjaxLoader :loading="loading" />
+</template>
--- a/server/ui-src/components/message/Screenshot.vue
+++ b/server/ui-src/components/message/Screenshot.vue
@@ -1,5 +1,7 @@

 <script>
+import AjaxLoader from '../AjaxLoader.vue'
+import CommonMixins from '../../mixins/CommonMixins'
 import { domToPng } from 'modern-screenshot'

 export default {
@@ -7,19 +9,26 @@ export default {
        message: Object,
    },

+    mixins: [CommonMixins],
+
+    components: {
+        AjaxLoader,
+    },
+
    data() {
        return {
            html: false,
-            loading: false
+            loading: 0
        }
    },

    methods: {
        initScreenshot: function () {
-            this.loading = true
+            this.loading = 1
            let self = this
            // remove base tag, if set
            let h = this.message.HTML.replace(/<base .*>/mi, '')
+            let proxy = this.resolve('/proxy')

            // Outlook hacks - else screenshot returns blank image
            h = h.replace(/<html [^>]+>/mgi, '<html>') // remove html attributes
@@ -31,9 +40,9 @@ export default {
            const urlRegex = /(url\((\'|\")?(https?:\/\/[^\)\'\"]+)(\'|\")?\))/mgi;
            h = h.replaceAll(urlRegex, function (match, p1, p2, p3) {
                if (typeof p2 === 'string') {
-                    return `url(${p2}proxy?url=` + encodeURIComponent(self.decodeEntities(p3)) + `${p2})`
+                    return `url(${p2}${proxy}?url=` + encodeURIComponent(self.decodeEntities(p3)) + `${p2})`
                }
-                return `url(proxy?url=` + encodeURIComponent(self.decodeEntities(p3)) + `)`
+                return `url(${proxy}?url=` + encodeURIComponent(self.decodeEntities(p3)) + `)`
            })

            // create temporary document to manipulate
@@ -54,7 +63,7 @@ export default {
                let src = i.getAttribute('href')

                if (src && src.match(/^https?:\/\//i) && src.indexOf(window.location.origin + window.location.pathname) !== 0) {
-                    i.setAttribute('href', 'proxy?url=' + encodeURIComponent(self.decodeEntities(src)))
+                    i.setAttribute('href', `${proxy}?url=` + encodeURIComponent(self.decodeEntities(src)))
                }
            }

@@ -63,7 +72,7 @@ export default {
            for (let i of images) {
                let src = i.getAttribute('src')
                if (src && src.match(/^https?:\/\//i) && src.indexOf(window.location.origin + window.location.pathname) !== 0) {
-                    i.setAttribute('src', 'proxy?url=' + encodeURIComponent(self.decodeEntities(src)))
+                    i.setAttribute('src', `${proxy}?url=` + encodeURIComponent(self.decodeEntities(src)))
                }
            }

@@ -74,7 +83,7 @@ export default {

                if (src && src.match(/^https?:\/\//i) && src.indexOf(window.location.origin + window.location.pathname) !== 0) {
                    // replace with proxy link
-                    i.setAttribute('background', 'proxy?url=' + encodeURIComponent(self.decodeEntities(src)))
+                    i.setAttribute('background', `${proxy}?url=` + encodeURIComponent(self.decodeEntities(src)))
                }
            }

@@ -121,7 +130,7 @@ export default {
                link.download = self.message.ID + '.png'
                link.href = dataUrl
                link.click()
-                self.loading = false
+                self.loading = 0
                self.html = false
            })
        }
@@ -134,11 +143,5 @@ export default {
        style="position: absolute; margin-left: -100000px;">
    </iframe>

-    <div id="loading" v-if="loading">
-        <div class="d-flex justify-content-center align-items-center h-100">
-            <div class="spinner-border text-secondary" role="status">
-                <span class="visually-hidden">Loading...</span>
-            </div>
-        </div>
-    </div>
+    <AjaxLoader :loading="loading" />
 </template>
--- a/server/ui-src/mixins/CommonMixins.js
+++ b/server/ui-src/mixins/CommonMixins.js
@@ -1,76 +1,88 @@
 import axios from 'axios'
-import { Modal } from 'bootstrap'
 import moment from 'moment'
 import ColorHash from 'color-hash'
+import { Modal, Offcanvas } from 'bootstrap'

-
-// FakeModal is used to return a fake Bootstrap modal
+// BootstrapElement is used to return a fake Bootstrap element
 // if the ID returns nothing to prevent errors.
-function FakeModal() { }
-FakeModal.prototype.hide = function () { }
-FakeModal.prototype.show = function () { }
+class BootstrapElement {
+	constructor() { }
+	hide() { }
+	show() { }
+}

 // Set up the color hash generator lightness and hue to ensure darker colors
-const colorHash = new ColorHash({ lightness: 0.3, saturation: [0.35, 0.5, 0.65] });
+const colorHash = new ColorHash({ lightness: 0.3, saturation: [0.35, 0.5, 0.65] })

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

-	mounted() {
-		this.showTagColors = localStorage.getItem('showTagsColors')
-	},
-
 	methods: {
+		resolve: function (u) {
+			return this.$router.resolve(u).href
+		},
+
+		searchURI: function (s) {
+			return this.resolve('/search') + '?q=' + encodeURIComponent(s)
+		},
+
 		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];
+			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);
+			return new Intl.NumberFormat().format(nr)
 		},

 		messageDate: function (d) {
-			return moment(d).format('ddd, D MMM YYYY, h:mm a');
+			return moment(d).format('ddd, D MMM YYYY, h:mm a')
 		},

-		// 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);
+		tagEncodeURI: function (tag) {
+			if (tag.match(/ /)) {
+				tag = `"${tag}"`
 			}
+
+			return encodeURIComponent(`tag:${tag}`)
+		},
+
+		getSearch: function () {
+			if (!window.location.search) {
+				return false
+			}
+
+			const urlParams = new URLSearchParams(window.location.search)
+			const q = urlParams.get('q').trim()
+			if (q == '') {
+				return false
+			}
+
+			return q
 		},

 		// generic modal get/set function
 		modal: function (id) {
-			let e = document.getElementById(id);
+			let e = document.getElementById(id)
 			if (e) {
-				return Modal.getOrCreateInstance(e);
+				return Modal.getOrCreateInstance(e)
 			}
 			// in case there are open/close actions
-			return new FakeModal();
+			return new BootstrapElement()
+		},
+
+		// close mobile navigation
+		hideNav: function () {
+			let e = document.getElementById('offcanvas')
+			if (e) {
+				Offcanvas.getOrCreateInstance(e).hide()
+			}
 		},

 		/**
@@ -79,19 +91,26 @@ const commonMixins = {
 		 * @params string   url
 		 * @params array    array parameters Object/array
 		 * @params function callback function
+		 * @params function error callback function
 		 */
-		get: function (url, values, callback) {
-			let self = this;
-			self.loading++;
+		get: function (url, values, callback, errorCallback) {
+			let self = this
+			self.loading++
 			axios.get(url, { params: values })
 				.then(callback)
-				.catch(self.handleError)
+				.catch(function (err) {
+					if (typeof errorCallback == 'function') {
+						return errorCallback(err)
+					}
+
+					self.handleError(err)
+				})
 				.then(function () {
 					// always executed
 					if (self.loading > 0) {
-						self.loading--;
+						self.loading--
 					}
-				});
+				})
 		},

 		/**
@@ -102,17 +121,17 @@ const commonMixins = {
 		 * @params function callback function
 		 */
 		post: function (url, data, callback) {
-			let self = this;
-			self.loading++;
+			let self = this
+			self.loading++
 			axios.post(url, data)
 				.then(callback)
 				.catch(self.handleError)
 				.then(function () {
 					// always executed
 					if (self.loading > 0) {
-						self.loading--;
+						self.loading--
 					}
-				});
+				})
 		},

 		/**
@@ -123,17 +142,17 @@ const commonMixins = {
 		 * @params function callback function
 		 */
 		delete: function (url, data, callback) {
-			let self = this;
-			self.loading++;
+			let self = this
+			self.loading++
 			axios.delete(url, { data: data })
 				.then(callback)
 				.catch(self.handleError)
 				.then(function () {
 					// always executed
 					if (self.loading > 0) {
-						self.loading--;
+						self.loading--
 					}
-				});
+				})
 		},

 		/**
@@ -144,73 +163,93 @@ const commonMixins = {
 		 * @params function callback function
 		 */
 		put: function (url, data, callback) {
-			let self = this;
-			self.loading++;
+			let self = this
+			self.loading++
 			axios.put(url, data)
 				.then(callback)
 				.catch(self.handleError)
 				.then(function () {
 					// always executed
 					if (self.loading > 0) {
-						self.loading--;
+						self.loading--
 					}
-				});
+				})
+		},
+
+		// 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
+				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)
+			}
 		},

 		allAttachments: function (message) {
-			let a = [];
+			let a = []
 			for (let i in message.Attachments) {
-				a.push(message.Attachments[i]);
+				a.push(message.Attachments[i])
 			}
 			for (let i in message.OtherParts) {
-				a.push(message.OtherParts[i]);
+				a.push(message.OtherParts[i])
 			}
 			for (let i in message.Inline) {
-				a.push(message.Inline[i]);
+				a.push(message.Inline[i])
 			}

-			return a.length ? a : false;
+			return a.length ? a : false
 		},

 		isImage(a) {
-			return a.ContentType.match(/^image\//);
+			return a.ContentType.match(/^image\//)
 		},

 		attachmentIcon: function (a) {
-			let ext = a.FileName.split('.').pop().toLowerCase();
+			let ext = a.FileName.split('.').pop().toLowerCase()

 			if (a.ContentType.match(/^image\//)) {
-				return 'bi-file-image-fill';
+				return 'bi-file-image-fill'
 			}
 			if (a.ContentType.match(/\/pdf$/) || ext == 'pdf') {
-				return 'bi-file-pdf-fill';
+				return 'bi-file-pdf-fill'
 			}
 			if (['doc', 'docx', 'odt', 'rtf'].includes(ext)) {
-				return 'bi-file-word-fill';
+				return 'bi-file-word-fill'
 			}
 			if (['xls', 'xlsx', 'ods'].includes(ext)) {
-				return 'bi-file-spreadsheet-fill';
+				return 'bi-file-spreadsheet-fill'
 			}
 			if (['ppt', 'pptx', 'key', 'ppt', 'odp'].includes(ext)) {
-				return 'bi-file-slides-fill';
+				return 'bi-file-slides-fill'
 			}
 			if (['zip', 'tar', 'rar', 'bz2', 'gz', 'xz'].includes(ext)) {
-				return 'bi-file-zip-fill';
+				return 'bi-file-zip-fill'
 			}
 			if (a.ContentType.match(/^audio\//)) {
-				return 'bi-file-music-fill';
+				return 'bi-file-music-fill'
 			}
 			if (a.ContentType.match(/^video\//)) {
-				return 'bi-file-play-fill';
+				return 'bi-file-play-fill'
 			}
 			if (a.ContentType.match(/\/calendar$/)) {
-				return 'bi-file-check-fill';
+				return 'bi-file-check-fill'
 			}
 			if (a.ContentType.match(/^text\//) || ['txt', 'sh', 'log'].includes(ext)) {
-				return 'bi-file-text-fill';
+				return 'bi-file-text-fill'
 			}

-			return 'bi-file-arrow-down-fill';
+			return 'bi-file-arrow-down-fill'
 		},

 		// Returns a hex color based on a string.
@@ -223,18 +262,5 @@ const commonMixins = {

 			return this.tagColorCache[s]
 		},
-
-		toggleTagColors: function () {
-			if (this.showTagColors) {
-				localStorage.removeItem('showTagsColors')
-				this.showTagColors = false
-			} else {
-				localStorage.setItem('showTagsColors', '1')
-				this.showTagColors = true
-			}
-		}
 	}
 }
-
-
-export default commonMixins;
--- a/server/ui-src/mixins/MessagesMixins.js
+++ b/server/ui-src/mixins/MessagesMixins.js
@@ -0,0 +1,90 @@
+import CommonMixins from './CommonMixins.js'
+import { mailbox } from '../stores/mailbox.js'
+import { pagination } from '../stores/pagination.js'
+
+export default {
+	mixins: [CommonMixins],
+
+	data() {
+		return {
+			apiURI: false,
+			pagination,
+			mailbox,
+		}
+	},
+
+	watch: {
+		'mailbox.refresh': function (v) {
+			if (v) {
+				// trigger a refresh
+				this.loadMessages()
+			}
+
+			mailbox.refresh = false
+		}
+	},
+
+	methods: {
+		reloadMailbox: function () {
+			pagination.start = 0
+			this.loadMessages()
+		},
+
+		loadMessages: function () {
+			if (!this.apiURI) {
+				alert('apiURL not set!')
+				return
+			}
+
+			let self = this
+			let params = {}
+			mailbox.selected = []
+
+			params['limit'] = pagination.limit
+			if (pagination.start > 0) {
+				params['start'] = pagination.start
+			}
+
+			self.get(this.apiURI, params, function (response) {
+				mailbox.total = response.data.total // all messages
+				mailbox.unread = response.data.unread // all unread messages
+				mailbox.tags = response.data.tags // all tags
+				mailbox.messages = response.data.messages // current messages
+				mailbox.count = response.data.messages_count // total results for this mailbox/search
+				// ensure the pagination remains consistent
+				pagination.start = response.data.start
+
+				if (response.data.count == 0 && response.data.start > 0) {
+					pagination.start = 0
+					return self.loadMessages()
+				}
+
+				if (mailbox.lastMessage) {
+					window.setTimeout(() => {
+						let m = document.getElementById(mailbox.lastMessage)
+						if (m) {
+							m.focus()
+							// m.scrollIntoView({ behavior: 'smooth', block: 'center' })
+							m.scrollIntoView({ block: 'center' })
+						} else {
+							let mp = document.getElementById('message-page')
+							if (mp) {
+								mp.scrollTop = 0
+							}
+						}
+
+						mailbox.lastMessage = false
+					}, 50)
+
+				} else if (!window.scrollInPlace) {
+					let mp = document.getElementById('message-page')
+					if (mp) {
+						mp.scrollTop = 0
+					}
+				}
+
+				window.scrollInPlace = false
+			})
+		},
+	}
+}
--- a/server/ui-src/router/index.js
+++ b/server/ui-src/router/index.js
@@ -0,0 +1,37 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import MailboxView from '../views/MailboxView.vue'
+import MessageView from '../views/MessageView.vue'
+import NotFoundView from '../views/NotFoundView.vue'
+import SearchView from '../views/SearchView.vue'
+
+let d = document.getElementById('app')
+let webroot = '/'
+if (d) {
+	webroot = d.dataset.webroot
+}
+
+// paths are relative to webroot
+const router = createRouter({
+	history: createWebHistory(webroot),
+	routes: [
+		{
+			path: '/',
+			component: MailboxView
+		},
+		{
+			path: '/search',
+			component: SearchView
+		},
+		{
+			path: '/view/:id',
+			component: MessageView
+		},
+		{
+			path: '/:pathMatch(.*)*',
+			name: 'NotFound',
+			component: NotFoundView
+		}
+	]
+})
+
+export default router
--- a/server/ui-src/stores/mailbox.js
+++ b/server/ui-src/stores/mailbox.js
@@ -0,0 +1,59 @@
+// State Management
+
+import { reactive, watch } from 'vue'
+import Tinycon from 'tinycon'
+
+Tinycon.setOptions({
+	height: 11,
+	background: '#dd0000',
+	fallback: false,
+	font: '9px arial',
+})
+
+// global mailbox info
+export const mailbox = reactive({
+	total: 0, 				// total number of messages in database
+	unread: 0, 				// total unread messages in database
+	count: 0, 				// total in mailbox or search
+	messages: [],			// current messages
+	tags: [], 				// all tags
+	showTagColors: false, 	// show tag colors?
+	selected: [], 			// currently selected
+	connected: false, 		// websocket connection
+	searching: false,		// current search, false for none
+	refresh: false, 		// to listen from MessagesMixin
+	notificationsSupported: false,
+	notificationsEnabled: false,
+	appInfo: {},			// application information
+	uiConfig: {},			// configuration for UI
+	lastMessage: false,		// return scrolling
+})
+
+watch(
+	() => mailbox.unread,
+	(v) => {
+		if (v == 0) {
+			Tinycon.reset()
+		} else {
+			Tinycon.setBubble(v)
+		}
+	}
+)
+
+watch(
+	() => mailbox.count,
+	(v) => {
+		mailbox.selected = []
+	}
+)
+
+watch(
+	() => mailbox.showTagColors,
+	(v) => {
+		if (v) {
+			localStorage.setItem('showTagsColors', '1')
+		} else {
+			localStorage.removeItem('showTagsColors')
+		}
+	}
+)
--- a/server/ui-src/stores/pagination.js
+++ b/server/ui-src/stores/pagination.js
@@ -0,0 +1,8 @@
+import { reactive } from 'vue'
+
+export const pagination = reactive({
+	start: 0,	// pagination offset
+	limit: 50, 	// per page
+	total: 0,  	// total results of current view / filter
+	count: 0, 	// number of messages currently displayed
+})
--- a/server/ui-src/templates/MessageRelease.vue
+++ b/server/ui-src/templates/MessageRelease.vue
@@ -1,116 +0,0 @@
-
-<script>
-import Tags from "bootstrap5-tags"
-import commonMixins from '../mixins.js'
-
-export default {
-	props: {
-		message: Object,
-		uiConfig: Object,
-		releaseAddresses: Array
-	},
-
-	data() {
-		return {
-			addresses: []
-		}
-	},
-
-	mixins: [commonMixins],
-
-	mounted() {
-		this.addresses = JSON.parse(JSON.stringify(this.releaseAddresses))
-		this.$nextTick(function () {
-			Tags.init("select[multiple]")
-		})
-	},
-
-	methods: {
-		releaseMessage: function () {
-			let self = this
-			// set timeout to allow for user clicking send before the tag filter has applied the tag
-			window.setTimeout(function () {
-				if (!self.addresses.length) {
-					return false
-				}
-
-				let data = {
-					to: self.addresses
-				}
-
-				self.post('api/v1/message/' + self.message.ID + '/release', data, function (response) {
-					self.modal("ReleaseModal").hide()
-				})
-			}, 100)
-		}
-	}
-}
-</script>
-
-<template>
-	<div class="modal-dialog modal-lg" v-if="message">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h1 class="modal-title fs-5" id="AppInfoModalLabel">Release email</h1>
-				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-			</div>
-			<div class="modal-body">
-				<h6>Send this message to one or more addresses specified below.</h6>
-				<div class="row">
-					<label class="col-sm-2 col-form-label text-body-secondary">From</label>
-					<div class="col-sm-10">
-						<input type="text" aria-label="From address" readonly class="form-control-plaintext"
-							:value="message.From.Address">
-					</div>
-				</div>
-				<div class="row">
-					<label class=" col-sm-2 col-form-label text-body-secondary">Subject</label>
-					<div class="col-sm-10">
-						<input type="text" aria-label="Subject" readonly class="form-control-plaintext"
-							:value="message.Subject">
-					</div>
-				</div>
-				<div class="row mb-3">
-					<label class="col-sm-2 col-form-label text-body-secondary">Send to</label>
-					<div class="col-sm-10">
-						<select class="form-select tag-selector" v-model="addresses" multiple data-allow-new="true"
-							data-clear-end="true" data-allow-clear="true" data-placeholder="Enter email addresses..."
-							data-add-on-blur="true" data-badge-style="primary"
-							data-regex='^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$'
-							data-separator="|,|">
-							<option value="">Enter email addresses...</option>
-							<!-- you need at least one option with the placeholder -->
-							<option v-for="t in releaseAddresses" :value="t">{{ t }}</option>
-						</select>
-						<div class="invalid-feedback">Invalid email address</div>
-					</div>
-				</div>
-				<div class="form-text text-center" v-if="uiConfig.MessageRelay.RecipientAllowlist != ''">
-					Note: A recipient allowlist has been configured. Any mail address not matching it will be rejected.
-					<br class="d-none d-md-inline">
-					Configured allowlist: <b>{{ uiConfig.MessageRelay.RecipientAllowlist }}</b>
-				</div>
-				<div class="form-text text-center">
-					Note: For testing purposes, a unique Message-Id will be generated on send.
-					<br class="d-none d-md-inline">
-					SMTP delivery failures will bounce back to
-					<b v-if="uiConfig.MessageRelay.ReturnPath != ''">{{ uiConfig.MessageRelay.ReturnPath }}</b>
-					<b v-else>{{ message.ReturnPath }}</b>.
-				</div>
-			</div>
-			<div class="modal-footer">
-				<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
-				<button type="button" class="btn btn-primary" :disabled="!addresses.length"
-					v-on:click="releaseMessage">Release</button>
-			</div>
-		</div>
-	</div>
-
-	<div id="loading" v-if="loading">
-		<div class="d-flex justify-content-center align-items-center h-100">
-			<div class="spinner-border text-secondary" role="status">
-				<span class="visually-hidden">Loading...</span>
-			</div>
-		</div>
-	</div>
-</template>
--- a/server/ui-src/templates/MessageSummary.vue
+++ b/server/ui-src/templates/MessageSummary.vue
@@ -1,28 +0,0 @@
-<script>
-import commonMixins from '../mixins.js'
-
-export default {
-	props: {
-		message: Object
-	},
-
-	mixins: [commonMixins]
-}
-</script>
-
-<template>
-	<div class="card mt-4">
-		<div class="card-body text-body-secondary small">
-			<p class="card-text">
-				<b>Message date:</b><br>
-				<small>{{ messageDate(message.Date) }}</small>
-			</p>
-			<p class="card-text">
-				<b>Size:</b> {{ getFileSize(message.Size) }}
-			</p>
-			<p class="card-text" v-if="allAttachments(message).length">
-				<b>Attachments:</b> {{ allAttachments(message).length }}
-			</p>
-		</div>
-	</div>
-</template>
--- a/server/ui-src/templates/MessageToast.vue
+++ b/server/ui-src/templates/MessageToast.vue
@@ -1,44 +0,0 @@
-<script>
-import { Toast } from 'bootstrap'
-
-export default {
-	props: {
-		message: Object
-	},
-
-	mounted() {
-		let self = this
-		let el = document.getElementById('messageToast')
-		if (el) {
-			el.addEventListener('hidden.bs.toast', () => {
-				self.$emit("clearMessageToast")
-			})
-
-			let b = Toast.getOrCreateInstance(el)
-			b.show()
-		}
-	}
-}
-</script>
-
-<template>
-	<div class="toast-container position-fixed bottom-0 end-0 p-3">
-		<div id="messageToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
-			<div class="toast-header">
-				<i class="bi bi-envelope-exclamation-fill me-2"></i>
-				<strong class="me-auto"><a :href="'#' + message.ID">New message</a></strong>
-				<small class="text-body-secondary">now</small>
-				<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
-			</div>
-
-			<div class="toast-body">
-				<div>
-					<a :href="'#' + message.ID" class="d-block text-truncate text-body-secondary">
-						<template v-if="message.Subject != ''">{{ message.Subject }}</template>
-						<template v-else>[ no subject ]</template>
-					</a>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
--- a/server/ui-src/templates/ThemeToggle.vue
+++ b/server/ui-src/templates/ThemeToggle.vue
@@ -1,123 +0,0 @@
-<script>
-export default {
-    data() {
-        return {
-            theme: 'auto',
-            icon: '#circle-half',
-            icons: {
-                'auto': '#circle-half',
-                'light': '#sun-fill',
-                'dark': '#moon-stars-fill'
-            }
-        }
-    },
-
-    mounted() {
-        this.setTheme(this.getPreferredTheme())
-    },
-
-    methods: {
-        getStoredTheme: function () {
-            let theme = localStorage.getItem('theme')
-            if (!theme) {
-                theme = 'auto'
-            }
-
-            return theme
-        },
-
-        setStoredTheme: function (theme) {
-            localStorage.setItem('theme', theme)
-            this.setTheme(theme)
-        },
-
-        getPreferredTheme: function () {
-            const storedTheme = this.getStoredTheme()
-            if (storedTheme) {
-                return storedTheme
-            }
-
-            return window.matchMedia('(prefers-color-scheme: dark)').matches
-                ? 'dark'
-                : 'light'
-        },
-
-        setTheme: function (theme) {
-            this.icon = this.icons[theme]
-            this.theme = theme
-            if (
-                theme === 'auto' &&
-                window.matchMedia('(prefers-color-scheme: dark)').matches
-            ) {
-                document.documentElement.setAttribute('data-bs-theme', 'dark')
-            } else {
-                document.documentElement.setAttribute('data-bs-theme', theme)
-            }
-        }
-    }
-}
-</script>
-
-<template>
-    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-        <symbol id="bootstrap" viewBox="0 0 512 408" fill="currentcolor">
-            <path
-                d="M106.342 0c-29.214 0-50.827 25.58-49.86 53.32.927 26.647-.278 61.165-8.966 89.31C38.802 170.862 24.07 188.707 0 191v26c24.069 2.293 38.802 20.138 47.516 48.37 8.688 28.145 9.893 62.663 8.965 89.311C55.515 382.42 77.128 408 106.342 408h299.353c29.214 0 50.827-25.58 49.861-53.319-.928-26.648.277-61.166 8.964-89.311 8.715-28.232 23.411-46.077 47.48-48.37v-26c-24.069-2.293-38.765-20.138-47.48-48.37-8.687-28.145-9.892-62.663-8.964-89.31C456.522 25.58 434.909 0 405.695 0H106.342zm236.559 251.102c0 38.197-28.501 61.355-75.798 61.355h-87.202a2 2 0 01-2-2v-213a2 2 0 012-2h86.74c39.439 0 65.322 21.354 65.322 54.138 0 23.008-17.409 43.61-39.594 47.219v1.203c30.196 3.309 50.532 24.212 50.532 53.085zm-84.58-128.125h-45.91v64.814h38.669c29.888 0 46.373-12.03 46.373-33.535 0-20.151-14.174-31.279-39.132-31.279zm-45.91 90.53v71.431h47.605c31.12 0 47.605-12.482 47.605-35.941 0-23.46-16.947-35.49-49.608-35.49h-45.602z" />
-        </symbol>
-        <symbol id="check2" viewBox="0 0 16 16" fill="currentcolor">
-            <path
-                d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
-        </symbol>
-        <symbol id="circle-half" viewBox="0 0 16 16" fill="currentcolor">
-            <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" />
-        </symbol>
-        <symbol id="moon-stars-fill" viewBox="0 0 16 16" fill="currentcolor">
-            <path
-                d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" />
-            <path
-                d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z" />
-        </symbol>
-        <symbol id="sun-fill" viewBox="0 0 16 16" fill="currentcolor">
-            <path
-                d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
-        </symbol>
-    </svg>
-    <div class="dropdown bd-mode-toggle float-end me-2 d-inline-block">
-        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" aria-expanded="false"
-            title="Toggle theme" data-bs-toggle="dropdown" aria-label="Toggle theme">
-            <svg class="bi my-1 theme-icon-active" width="1em" height="1em">
-                <use :href="icon"></use>
-            </svg>
-            <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
-        </button>
-        <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
-            <li>
-                <button type="button" class="dropdown-item d-flex align-items-center"
-                    :class="theme == 'light' ? 'active' : ''" @click="setStoredTheme('light')">
-                    <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em">
-                        <use href="#sun-fill"></use>
-                    </svg>
-                    Light
-                </button>
-            </li>
-            <li>
-                <button type="button" class="dropdown-item d-flex align-items-center"
-                    :class="theme == 'dark' ? 'active' : ''" @click="setStoredTheme('dark')">
-                    <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em">
-                        <use href="#moon-stars-fill"></use>
-                    </svg>
-                    Dark
-                </button>
-            </li>
-            <li>
-                <button type="button" class="dropdown-item d-flex align-items-center"
-                    :class="theme == 'auto' ? 'active' : ''" @click="setStoredTheme('auto')">
-                    <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em">
-                        <use href="#circle-half"></use>
-                    </svg>
-                    Auto
-                </button>
-            </li>
-        </ul>
-    </div>
-</template>
--- a/server/ui-src/views/MailboxView.vue
+++ b/server/ui-src/views/MailboxView.vue
@@ -0,0 +1,94 @@
+<script>
+import AboutMailpit from '../components/AboutMailpit.vue'
+import AjaxLoader from '../components/AjaxLoader.vue'
+import CommonMixins from '../mixins/CommonMixins'
+import ListMessages from '../components/ListMessages.vue'
+import MessagesMixins from '../mixins/MessagesMixins'
+import NavMailbox from '../components/NavMailbox.vue'
+import NavTags from '../components/NavTags.vue'
+import Pagination from '../components/Pagination.vue'
+import SearchForm from '../components/SearchForm.vue'
+import { mailbox } from '../stores/mailbox'
+
+export default {
+	mixins: [CommonMixins, MessagesMixins],
+
+	components: {
+		AboutMailpit,
+		AjaxLoader,
+		ListMessages,
+		NavMailbox,
+		NavTags,
+		Pagination,
+		SearchForm,
+	},
+
+	data() {
+		return {
+			mailbox,
+		}
+	},
+
+	mounted() {
+		mailbox.searching = false
+		this.apiURI = this.resolve(`/api/v1/messages`)
+		this.loadMessages()
+	},
+}
+</script>
+
+<template>
+	<div class="navbar navbar-expand-lg navbar-dark row flex-shrink-0 bg-primary text-white">
+		<div class="col-xl-2 col-md-3 col-auto pe-0">
+			<RouterLink to="/" class="navbar-brand text-white me-0" @click="reloadMailbox">
+				<img :src="resolve('/mailpit.svg')" alt="Mailpit">
+				<span class="ms-2 d-none d-sm-inline">Mailpit</span>
+			</RouterLink>
+		</div>
+		<div class="col col-md-4k col-lg-5 col-xl-6">
+			<SearchForm />
+		</div>
+		<div class="col-12 col-md-auto col-lg-4 col-xl-4 text-end mt-2 mt-md-0">
+			<div class="float-start d-md-none">
+				<button class="btn btn-outline-light me-2" type="button" data-bs-toggle="offcanvas"
+					data-bs-target="#offcanvas" aria-controls="offcanvas">
+					<i class="bi bi-list"></i>
+				</button>
+			</div>
+			<Pagination @loadMessages="loadMessages" :total="mailbox.total" />
+		</div>
+	</div>
+
+	<div class="offcanvas-md offcanvas-start d-md-none" data-bs-scroll="true" tabindex="-1" id="offcanvas"
+		aria-labelledby="offcanvasLabel">
+		<div class="offcanvas-header">
+			<h5 class="offcanvas-title" id="offcanvasLabel">Mailpit</h5>
+			<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvas"
+				aria-label="Close"></button>
+		</div>
+		<div class="offcanvas-body">
+			<NavMailbox @loadMessages="loadMessages" />
+			<NavTags />
+			<AboutMailpit />
+		</div>
+	</div>
+
+	<div class="row flex-fill" style="min-height:0">
+		<div class="d-none d-md-block col-xl-2 col-md-3 mh-100 position-relative"
+			style="overflow-y: auto; overflow-x: hidden;">
+			<NavMailbox @loadMessages="loadMessages" />
+			<NavTags />
+			<AboutMailpit />
+		</div>
+
+		<div class="col-xl-10 col-md-9 mh-100 ps-0 ps-md-2 pe-0">
+			<div class="mh-100" style="overflow-y: auto;" id="message-page">
+				<ListMessages :loading-messages="loading" />
+			</div>
+		</div>
+	</div>
+
+	<NavMailbox @loadMessages="loadMessages" modals />
+	<AboutMailpit modals />
+	<AjaxLoader :loading="loading" />
+</template>
--- a/server/ui-src/views/MessageView.vue
+++ b/server/ui-src/views/MessageView.vue
@@ -0,0 +1,346 @@
+<script>
+import AboutMailpit from '../components/AboutMailpit.vue'
+import AjaxLoader from '../components/AjaxLoader.vue'
+import CommonMixins from '../mixins/CommonMixins'
+import Message from '../components/message/Message.vue'
+import Release from '../components/message/Release.vue'
+import Screenshot from '../components/message/Screenshot.vue'
+import { mailbox } from '../stores/mailbox'
+import { pagination } from '../stores/pagination'
+
+export default {
+	mixins: [CommonMixins],
+
+	components: {
+		AboutMailpit,
+		AjaxLoader,
+		Message,
+		Screenshot,
+		Release,
+	},
+
+	data() {
+		return {
+			mailbox,
+			pagination,
+			message: false,
+			prevLink: false,
+			nextLink: false,
+			errorMessage: false,
+		}
+	},
+
+	watch: {
+		$route(to, from) {
+			this.loadMessage()
+		}
+	},
+
+	mounted() {
+		this.loadMessage()
+	},
+
+	methods: {
+		loadMessage: function () {
+			let self = this
+			this.message = false
+			let uri = self.resolve('/api/v1/message/' + this.$route.params.id)
+			self.get(uri, false, function (response) {
+				self.errorMessage = false
+
+				let d = response.data
+
+				if (self.wasUnread(d.ID)) {
+					mailbox.unread--
+				}
+
+				// replace inline images embedded as inline attachments
+				if (d.HTML && d.Inline) {
+					for (let i in d.Inline) {
+						let a = d.Inline[i]
+						if (a.ContentID != '') {
+							d.HTML = d.HTML.replace(
+								new RegExp('(=["\']?)(cid:' + a.ContentID + ')(["|\'|\\s|\\/|>|;])', 'g'),
+								'$1' + self.resolve('/api/v1/message/' + d.ID + '/part/' + a.PartID) + '$3'
+							)
+						}
+						if (a.FileName.match(/^[a-zA-Z0-9\_\-\.]+$/)) {
+							// some old email clients use the filename
+							d.HTML = d.HTML.replace(
+								new RegExp('(=["\']?)(' + a.FileName + ')(["|\'|\\s|\\/|>|;])', 'g'),
+								'$1' + self.resolve('/api/v1/message/' + d.ID + '/part/' + a.PartID) + '$3'
+							)
+						}
+					}
+				}
+
+				// replace inline images embedded as regular attachments
+				if (d.HTML && d.Attachments) {
+					for (let i in d.Attachments) {
+						let a = d.Attachments[i]
+						if (a.ContentID != '') {
+							d.HTML = d.HTML.replace(
+								new RegExp('(=["\']?)(cid:' + a.ContentID + ')(["|\'|\\s|\\/|>|;])', 'g'),
+								'$1' + self.resolve('/api/v1/message/' + d.ID + '/part/' + a.PartID) + '$3'
+							)
+						}
+						if (a.FileName.match(/^[a-zA-Z0-9\_\-\.]+$/)) {
+							// some old email clients use the filename
+							d.HTML = d.HTML.replace(
+								new RegExp('(=["\']?)(' + a.FileName + ')(["|\'|\\s|\\/|>|;])', 'g'),
+								'$1' + self.resolve('/api/v1/message/' + d.ID + '/part/' + a.PartID) + '$3'
+							)
+						}
+					}
+				}
+
+				self.message = d
+
+				self.detectPrevNext()
+			},
+				function (error) {
+					self.errorMessage = true
+					if (error.response && error.response.data) {
+						if (error.response.data.Error) {
+							self.errorMessage = error.response.data.Error
+						} else {
+							self.errorMessage = error.response.data
+						}
+					} else if (error.request) {
+						// The request was made but no response was received
+						self.errorMessage = 'Error sending data to the server. Please refresh the page.'
+					} else {
+						// Something happened in setting up the request that triggered an Error
+						self.errorMessage = error.message
+					}
+				})
+		},
+
+		// try detect whether this message was unread based on messages listing
+		wasUnread: function (id) {
+			for (let m in mailbox.messages) {
+				if (mailbox.messages[m].ID == id) {
+					if (!mailbox.messages[m].Read) {
+						mailbox.messages[m].Read = true
+						return true
+					}
+					return false
+				}
+			}
+		},
+
+		detectPrevNext: function () {
+			// generate the prev/next links based on current message list
+			this.prevLink = false
+			this.nextLink = false
+			let found = false
+
+			for (let m in mailbox.messages) {
+				if (mailbox.messages[m].ID == this.message.ID) {
+					found = true
+				} else if (found && !this.nextLink) {
+					this.nextLink = mailbox.messages[m].ID
+					break
+				} else {
+					this.prevLink = mailbox.messages[m].ID
+				}
+			}
+		},
+
+		downloadMessageBody: function (str, ext) {
+			let dl = document.createElement('a')
+			dl.href = "data:text/plain," + encodeURIComponent(str)
+			dl.target = '_blank'
+			dl.download = this.message.ID + '.' + ext
+			dl.click()
+		},
+
+		screenshotMessageHTML: function () {
+			this.$refs.ScreenshotRef.initScreenshot()
+		},
+
+		// mark current message as read
+		markUnread: function () {
+			let self = this
+			if (!self.message) {
+				return false
+			}
+			let uri = self.resolve('/api/v1/messages')
+			self.put(uri, { 'read': false, 'ids': [self.message.ID] }, function (response) {
+				self.goBack()
+			})
+		},
+
+		deleteMessage: function () {
+			let self = this
+			let ids = [self.message.ID]
+			let uri = self.resolve('/api/v1/messages')
+			self.delete(uri, { 'ids': ids }, function () {
+				self.goBack()
+			})
+		},
+
+		goBack: function () {
+			mailbox.lastMessage = this.$route.params.id
+
+			if (mailbox.searching) {
+				this.$router.push('/search?q=' + encodeURIComponent(mailbox.searching))
+			} else {
+				this.$router.push('/')
+			}
+		},
+
+		initReleaseModal: function () {
+			let self = this
+			self.modal('ReleaseModal').show()
+			window.setTimeout(function () {
+				window.setTimeout(function () {
+					// delay to allow elements to load / focus
+					self.$refs.ReleaseRef.initTags()
+					document.querySelector('#ReleaseModal input[role="combobox"]').focus()
+				}, 500)
+			}, 300)
+		},
+	}
+}
+</script>
+
+<template>
+	<div class="navbar navbar-expand-lg navbar-dark row flex-shrink-0 bg-primary text-white">
+		<div class="d-none d-md-block col-xl-2 col-md-3 col-auto pe-0">
+			<RouterLink to="/" class="navbar-brand text-white me-0" @click="pagination.start = 0">
+				<img :src="resolve('/mailpit.svg')" alt="Mailpit">
+				<span class="ms-2 d-none d-sm-inline">Mailpit</span>
+			</RouterLink>
+		</div>
+		<div class="col col-md-4k col-lg-5 col-xl-6" v-if="!errorMessage">
+			<button @click="goBack()" class="btn btn-outline-light me-3 me-sm-4 d-md-none" title="Return to messages">
+				<i class="bi bi-arrow-return-left"></i>
+			</button>
+			<button class="btn btn-outline-light me-1 me-sm-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>
+			<button class="btn btn-outline-light me-1 me-sm-2" title="Release message"
+				v-if="mailbox.uiConfig.MessageRelay && mailbox.uiConfig.MessageRelay.Enabled" v-on:click="initReleaseModal">
+				<i class="bi bi-send"></i> <span class="d-none d-md-inline">Release</span>
+			</button>
+			<button class="btn btn-outline-light me-1 me-sm-2" title="Delete message" v-on:click="deleteMessage">
+				<i class="bi bi-trash-fill"></i> <span class="d-none d-md-inline">Delete</span>
+			</button>
+		</div>
+		<div class="col-auto col-lg-4 col-xl-4 text-end" v-if="!errorMessage">
+			<div class="dropdown d-inline-block" id="DownloadBtn">
+				<button type="button" class="btn btn-outline-light dropdown-toggle" data-bs-toggle="dropdown"
+					aria-expanded="false">
+					<i class="bi bi-file-arrow-down-fill"></i>
+					<span class="d-none d-md-inline ms-1">Download</span>
+				</button>
+				<ul class="dropdown-menu dropdown-menu-end">
+					<li>
+						<a :href="resolve('/api/v1/message/' + message.ID + '/raw?dl=1')" class="dropdown-item"
+							title="Message source including headers, body and attachments">
+							Raw message
+						</a>
+					</li>
+					<li v-if="message.HTML">
+						<button v-on:click="downloadMessageBody(message.HTML, 'html')" class="dropdown-item">
+							HTML body
+						</button>
+					</li>
+					<li v-if="message.HTML">
+						<button class="dropdown-item" @click="screenshotMessageHTML()">
+							HTML screenshot
+						</button>
+					</li>
+					<li v-if="message.Text">
+						<button v-on:click="downloadMessageBody(message.Text, 'txt')" class="dropdown-item">
+							Text body
+						</button>
+					</li>
+					<template v-if="allAttachments(message).length">
+						<li>
+							<hr class="dropdown-divider">
+						</li>
+						<li>
+							<h6 class="dropdown-header">
+								Attachment<template v-if="allAttachments(message).length > 1">s</template>
+							</h6>
+						</li>
+						<li v-for="part in allAttachments(message)">
+							<RouterLink :to="'/api/v1/message/' + message.ID + '/part/' + part.PartID"
+								class="row m-0 dropdown-item d-flex" target="_blank"
+								:title="part.FileName != '' ? part.FileName : '[ unknown ]'" style="min-width: 350px">
+								<div class="col-auto p-0 pe-1">
+									<i class="bi" :class="attachmentIcon(part)"></i>
+								</div>
+								<div class="col text-truncate p-0 pe-1">
+									{{ part.FileName != '' ? part.FileName : '[ unknown ]' }}
+								</div>
+								<div class="col-auto text-muted small p-0">
+									{{ getFileSize(part.Size) }}
+								</div>
+							</RouterLink>
+						</li>
+					</template>
+				</ul>
+			</div>
+
+			<RouterLink :to="'/view/' + prevLink" class="btn btn-outline-light ms-1 ms-sm-2 me-1"
+				:class="prevLink ? '' : 'disabled'" title="View previous message">
+				<i class="bi bi-caret-left-fill"></i>
+			</RouterLink>
+			<RouterLink :to="'/view/' + nextLink" class="btn btn-outline-light" :class="nextLink ? '' : 'disabled'">
+				<i class="bi bi-caret-right-fill" title="View next message"></i>
+			</RouterLink>
+		</div>
+	</div>
+
+	<div class="row flex-fill" style="min-height:0">
+		<div class="d-none d-md-block col-xl-2 col-md-3 mh-100 position-relative"
+			style="overflow-y: auto; overflow-x: hidden;">
+
+			<div class="list-group my-2">
+				<button @click="goBack()" class="list-group-item list-group-item-action">
+					<i class="bi bi-arrow-return-left me-1"></i>
+					<span class="ms-1">Return</span>
+					<span class="badge rounded-pill ms-1 float-end text-bg-secondary" title="Unread messages"
+						v-if="mailbox.unread && !errorMessage">
+						{{ formatNumber(mailbox.unread) }}
+					</span>
+				</button>
+			</div>
+
+			<div class="card mt-4" v-if="!errorMessage">
+				<div class="card-body text-body-secondary small">
+					<p class="card-text">
+						<b>Message date:</b><br>
+						<small>{{ messageDate(message.Date) }}</small>
+					</p>
+					<p class="card-text">
+						<b>Size:</b> {{ getFileSize(message.Size) }}
+					</p>
+					<p class="card-text" v-if="allAttachments(message).length">
+						<b>Attachments:</b> {{ allAttachments(message).length }}
+					</p>
+				</div>
+			</div>
+			<AboutMailpit />
+		</div>
+
+		<div class="col-xl-10 col-md-9 mh-100 ps-0 ps-md-2 pe-0">
+			<div class="mh-100" style="overflow-y: auto;" id="message-page">
+				<template v-if="errorMessage">
+					<h3 class="text-center my-3">
+						{{ errorMessage }}
+					</h3>
+				</template>
+				<Message v-else-if="message" :key="message.ID" :message="message" />
+			</div>
+		</div>
+	</div>
+
+	<AboutMailpit modals />
+	<AjaxLoader :loading="loading" />
+	<Release v-if="message" ref="ReleaseRef" :message="message" />
+	<Screenshot v-if="message" ref="ScreenshotRef" :message="message" />
+</template>
--- a/server/ui-src/views/NotFoundView.vue
+++ b/server/ui-src/views/NotFoundView.vue
@@ -0,0 +1,29 @@
+<script>
+import AboutMailpit from '../components/AboutMailpit.vue'
+import CommonMixins from '../mixins/CommonMixins'
+
+export default {
+	mixins: [CommonMixins],
+
+	components: {
+		AboutMailpit,
+	},
+}
+</script>
+
+<template>
+	<div class="h-100 bg-primary d-flex align-items-center justify-content-center my-2 text-white">
+		<div class="d-block text-center">
+			<RouterLink to="/" class="text-white">
+				<img :src="resolve('/mailpit.svg')" alt="Mailpit" style="max-width:80%; width: 100px;">
+				<p class="h2 my-3">Page not found</p>
+
+				<p>Click here to continue</p>
+			</RouterLink>
+		</div>
+
+		<div class="d-none">
+			<AboutMailpit />
+		</div>
+	</div>
+</template>
--- a/server/ui-src/views/SearchView.vue
+++ b/server/ui-src/views/SearchView.vue
@@ -0,0 +1,122 @@
+<script>
+import AboutMailpit from '../components/AboutMailpit.vue'
+import AjaxLoader from '../components/AjaxLoader.vue'
+import CommonMixins from '../mixins/CommonMixins'
+import ListMessages from '../components/ListMessages.vue'
+import MessagesMixins from '../mixins/MessagesMixins'
+import NavSearch from '../components/NavSearch.vue'
+import NavTags from '../components/NavTags.vue'
+import Pagination from '../components/Pagination.vue'
+import SearchForm from '../components/SearchForm.vue'
+import { mailbox } from '../stores/mailbox'
+import { pagination } from '../stores/pagination'
+
+export default {
+	mixins: [CommonMixins, MessagesMixins],
+
+	components: {
+		AboutMailpit,
+		AjaxLoader,
+		ListMessages,
+		NavSearch,
+		NavTags,
+		Pagination,
+		SearchForm,
+	},
+
+	data() {
+		return {
+			mailbox,
+			pagination,
+		}
+	},
+
+	watch: {
+		$route(to, from) {
+			this.doSearch(true)
+		}
+	},
+
+	mounted() {
+		mailbox.searching = this.getSearch()
+		this.doSearch(false)
+	},
+
+	methods: {
+		doSearch: function (resetPagination) {
+			let s = this.getSearch()
+
+			if (!s) {
+				mailbox.searching = false
+				this.$router.push('/')
+				return
+			}
+
+			mailbox.searching = s
+
+			if (resetPagination) {
+				pagination.start = 0
+			}
+
+			this.apiURI = this.resolve(`/api/v1/search`) + '?query=' + encodeURIComponent(s)
+			this.loadMessages()
+		}
+	}
+}
+</script>
+
+<template>
+	<div class="navbar navbar-expand-lg navbar-dark row flex-shrink-0 bg-primary text-white">
+		<div class="col-xl-2 col-md-3 col-auto pe-0">
+			<RouterLink to="/" class="navbar-brand text-white me-0" @click="pagination.start = 0">
+				<img :src="resolve('/mailpit.svg')" alt="Mailpit">
+				<span class="ms-2 d-none d-sm-inline">Mailpit</span>
+			</RouterLink>
+		</div>
+		<div class="col col-md-4k col-lg-5 col-xl-6">
+			<SearchForm />
+		</div>
+		<div class="col-12 col-md-auto col-lg-4 col-xl-4 text-end mt-2 mt-lg-0">
+			<div class="float-start d-md-none">
+				<button class="btn btn-outline-light me-2" type="button" data-bs-toggle="offcanvas"
+					data-bs-target="#offcanvas" aria-controls="offcanvas">
+					<i class="bi bi-list"></i>
+				</button>
+			</div>
+			<Pagination @loadMessages="loadMessages" :total="mailbox.count" />
+		</div>
+	</div>
+
+	<div class="offcanvas-md offcanvas-start d-md-none" data-bs-scroll="true" tabindex="-1" id="offcanvas"
+		aria-labelledby="offcanvasLabel">
+		<div class="offcanvas-header">
+			<h5 class="offcanvas-title" id="offcanvasLabel">Mailpit</h5>
+			<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvas"
+				aria-label="Close"></button>
+		</div>
+		<div class="offcanvas-body">
+			<NavSearch @loadMessages="loadMessages" />
+			<NavTags />
+			<AboutMailpit />
+		</div>
+	</div>
+
+	<div class="row flex-fill" style="min-height:0">
+		<div class="d-none d-md-block col-lg-2 col-md-3 mh-100 position-relative"
+			style="overflow-y: auto; overflow-x: hidden;">
+			<NavSearch @loadMessages="loadMessages" />
+			<NavTags />
+			<AboutMailpit />
+		</div>
+
+		<div class="col-lg-10 col-md-9 mh-100 ps-0 ps-md-2 pe-0">
+			<div class="mh-100" style="overflow-y: auto;" id="message-page">
+				<ListMessages :loading-messages="loading" />
+			</div>
+		</div>
+	</div>
+
+	<NavSearch @loadMessages="loadMessages" modals />
+	<AboutMailpit modals />
+	<AjaxLoader :loading="loading" />
+</template>
--- a/server/ui/api/v1/swagger.json
+++ b/server/ui/api/v1/swagger.json
@@ -532,9 +532,64 @@
            "$ref": "#/responses/ErrorResponse"
          }
        }
+      },
+      "delete": {
+        "description": "Deletes messages matching a search.",
+        "produces": [
+          "application/json"
+        ],
+        "schemes": [
+          "http",
+          "https"
+        ],
+        "tags": [
+          "messages"
+        ],
+        "summary": "Delete messages by search",
+        "operationId": "MessagesSummary",
+        "parameters": [
+          {
+            "type": "string",
+            "description": "Search query",
+            "name": "query",
+            "in": "query",
+            "required": true
+          }
+        ],
+        "responses": {
+          "200": {
+            "$ref": "#/responses/OKResponse"
+          },
+          "default": {
+            "$ref": "#/responses/ErrorResponse"
+          }
+        }
      }
    },
    "/api/v1/tags": {
+      "get": {
+        "description": "Returns a JSON array of all unique message tags.",
+        "produces": [
+          "application/json"
+        ],
+        "schemes": [
+          "http",
+          "https"
+        ],
+        "tags": [
+          "tags"
+        ],
+        "summary": "Get all current tags",
+        "operationId": "SetTags",
+        "responses": {
+          "200": {
+            "$ref": "#/responses/ArrayResponse"
+          },
+          "default": {
+            "$ref": "#/responses/ErrorResponse"
+          }
+        }
+      },
      "put": {
        "description": "To remove all tags from a message, pass an empty tags array.",
        "consumes": [
@@ -599,6 +654,74 @@
          }
        }
      }
+    },
+    "/view/{ID}.html": {
+      "get": {
+        "description": "Renders just the message's HTML part which can be used for UI integration testing.\nAttached inline images are modified to link to the API provided they exist.\nNote that is the message does not contain a HTML part then an 404 error is returned.\n\nThe ID can be set to `latest` to return the latest message.",
+        "produces": [
+          "text/html"
+        ],
+        "schemes": [
+          "http",
+          "https"
+        ],
+        "tags": [
+          "testing"
+        ],
+        "summary": "Render message HTML part",
+        "operationId": "GetMessageHTML",
+        "parameters": [
+          {
+            "type": "string",
+            "description": "Database ID or latest",
+            "name": "ID",
+            "in": "path",
+            "required": true
+          }
+        ],
+        "responses": {
+          "200": {
+            "$ref": "#/responses/HTMLResponse"
+          },
+          "default": {
+            "$ref": "#/responses/ErrorResponse"
+          }
+        }
+      }
+    },
+    "/view/{ID}.txt": {
+      "get": {
+        "description": "Renders just the message's text part which can be used for UI integration testing.\n\nThe ID can be set to `latest` to return the latest message.",
+        "produces": [
+          "text/plain"
+        ],
+        "schemes": [
+          "http",
+          "https"
+        ],
+        "tags": [
+          "testing"
+        ],
+        "summary": "Render message text part",
+        "operationId": "GetMessageText",
+        "parameters": [
+          {
+            "type": "string",
+            "description": "Database ID or latest",
+            "name": "ID",
+            "in": "path",
+            "required": true
+          }
+        ],
+        "responses": {
+          "200": {
+            "$ref": "#/responses/TextResponse"
+          },
+          "default": {
+            "$ref": "#/responses/ErrorResponse"
+          }
+        }
+      }
    }
  },
  "definitions": {
@@ -677,7 +800,7 @@
          "format": "int64"
        }
      },
-      "x-go-package": "github.com/axllent/mailpit/storage"
+      "x-go-package": "github.com/axllent/mailpit/internal/storage"
    },
    "DeleteRequest": {
      "description": "Delete request",
@@ -721,7 +844,7 @@
        }
      },
      "x-go-name": "Response",
-      "x-go-package": "github.com/axllent/mailpit/utils/htmlcheck"
+      "x-go-package": "github.com/axllent/mailpit/internal/htmlcheck"
    },
    "HTMLCheckResult": {
      "description": "Result struct",
@@ -753,7 +876,7 @@
        }
      },
      "x-go-name": "Result",
-      "x-go-package": "github.com/axllent/mailpit/utils/htmlcheck"
+      "x-go-package": "github.com/axllent/mailpit/internal/htmlcheck"
    },
    "HTMLCheckScore": {
      "description": "Score struct",
@@ -781,7 +904,7 @@
        }
      },
      "x-go-name": "Score",
-      "x-go-package": "github.com/axllent/mailpit/utils/htmlcheck"
+      "x-go-package": "github.com/axllent/mailpit/internal/htmlcheck"
    },
    "HTMLCheckTotal": {
      "description": "Total weighted result for all scores",
@@ -814,7 +937,7 @@
        }
      },
      "x-go-name": "Total",
-      "x-go-package": "github.com/axllent/mailpit/utils/htmlcheck"
+      "x-go-package": "github.com/axllent/mailpit/internal/htmlcheck"
    },
    "HTMLCheckWarning": {
      "description": "Warning represents a failed test",
@@ -870,7 +993,7 @@
        }
      },
      "x-go-name": "Warning",
-      "x-go-package": "github.com/axllent/mailpit/utils/htmlcheck"
+      "x-go-package": "github.com/axllent/mailpit/internal/htmlcheck"
    },
    "Link": {
      "description": "Link struct",
@@ -890,7 +1013,7 @@
          "type": "string"
        }
      },
-      "x-go-package": "github.com/axllent/mailpit/utils/linkcheck"
+      "x-go-package": "github.com/axllent/mailpit/internal/linkcheck"
    },
    "LinkCheckResponse": {
      "description": "Response represents the Link check response",
@@ -910,7 +1033,7 @@
        }
      },
      "x-go-name": "Response",
-      "x-go-package": "github.com/axllent/mailpit/utils/linkcheck"
+      "x-go-package": "github.com/axllent/mailpit/internal/linkcheck"
    },
    "Message": {
      "description": "Message data excluding physical attachments",
@@ -964,10 +1087,6 @@
          "description": "Message ID",
          "type": "string"
        },
-        "Read": {
-          "description": "Read status",
-          "type": "boolean"
-        },
        "ReplyTo": {
          "description": "ReplyTo addresses",
          "type": "array",
@@ -1007,7 +1126,7 @@
          }
        }
      },
-      "x-go-package": "github.com/axllent/mailpit/storage"
+      "x-go-package": "github.com/axllent/mailpit/internal/storage"
    },
    "MessageHeaders": {
      "description": "Message headers",
@@ -1088,7 +1207,7 @@
          }
        }
      },
-      "x-go-package": "github.com/axllent/mailpit/storage"
+      "x-go-package": "github.com/axllent/mailpit/internal/storage"
    },
    "MessagesSummary": {
      "description": "MessagesSummary is a summary of a list of messages",
@@ -1234,12 +1353,24 @@
    }
  },
  "responses": {
+    "ArrayResponse": {
+      "description": "Plain JSON array response",
+      "schema": {
+        "type": "array",
+        "items": {
+          "type": "string"
+        }
+      }
+    },
    "BinaryResponse": {
      "description": "Binary data response inherits the attachment's content type"
    },
    "ErrorResponse": {
      "description": "Error response"
    },
+    "HTMLResponse": {
+      "description": "HTML response"
+    },
    "InfoResponse": {
      "description": "Application information",
      "schema": {
--- a/server/ui/index.html
+++ b/server/ui/index.html
@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="h-100">
-
-<head>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width,initial-scale=1.0">
-	<meta name="referrer" content="no-referrer">
-	<meta name="robots" content="noindex, nofollow, noarchive">
-	<link rel="icon" href="favicon.svg">
-	<title>Mailpit</title>
-	<link rel=stylesheet href="dist/app.css">
-</head>
-
-<body class="h-100">
-	<div class="container-fluid h-100 d-flex flex-column" id="app">
-		<noscript>You require JavaScript to use this app.</noscript>
-	</div>
-
-	<script src="dist/app.js"></script>
-</body>
-
-</html>
--- a/server/websockets/client.go
+++ b/server/websockets/client.go
@@ -9,7 +9,7 @@ import (
 	"time"

 	"github.com/axllent/mailpit/config"
-	"github.com/axllent/mailpit/utils/logger"
+	"github.com/axllent/mailpit/internal/logger"
 	"github.com/gorilla/websocket"
 )

--- a/server/websockets/hub.go
+++ b/server/websockets/hub.go
@@ -7,7 +7,7 @@ package websockets
 import (
 	"encoding/json"

-	"github.com/axllent/mailpit/utils/logger"
+	"github.com/axllent/mailpit/internal/logger"
 )

 // Hub maintains the set of active clients and broadcasts messages to the
@@ -69,7 +69,7 @@ func (h *Hub) Run() {

 // Broadcast will spawn a broadcast message to all connected clients
 func Broadcast(t string, msg interface{}) {
-	if MessageHub == nil {
+	if MessageHub == nil || len(MessageHub.Clients) == 0 {
 		return
 	}

@@ -79,7 +79,7 @@ func Broadcast(t string, msg interface{}) {
 	b, err := json.Marshal(w)

 	if err != nil {
-		logger.Log().Errorf("[http] broadcast received invalid data: %s", err)
+		logger.Log().Errorf("[websocket] broadcast received invalid data: %s", err)
 	}

 	go func() { MessageHub.Broadcast <- b }()
--- a/storage/database_test.go
+++ b/storage/database_test.go
@@ -1,272 +0,0 @@
-package storage
-
-import (
-	"bytes"
-	"fmt"
-	"io/ioutil"
-	"math/rand"
-	"testing"
-	"time"
-
-	"github.com/axllent/mailpit/config"
-	"github.com/axllent/mailpit/utils/logger"
-	"github.com/jhillyerd/enmime"
-)
-
-var (
-	testTextEmail []byte
-	testMimeEmail []byte
-	testRuns      = 100
-)
-
-func TestTextEmailInserts(t *testing.T) {
-	setup()
-	defer Close()
-
-	t.Log("Testing text email storage")
-
-	start := time.Now()
-
-	assertEqualStats(t, 0, 0)
-
-	for i := 0; i < testRuns; i++ {
-		if _, err := Store(testTextEmail); err != nil {
-			t.Log("error ", err)
-			t.Fail()
-		}
-	}
-
-	assertEqual(t, CountTotal(), testRuns, "Incorrect number of text emails stored")
-
-	t.Logf("Inserted %d text emails in %s", testRuns, time.Since(start))
-
-	assertEqualStats(t, testRuns, testRuns)
-
-	delStart := time.Now()
-	if err := DeleteAllMessages(); err != nil {
-		t.Log("error ", err)
-		t.Fail()
-	}
-
-	assertEqual(t, CountTotal(), 0, "incorrect number of text emails deleted")
-
-	t.Logf("deleted %d text emails in %s", testRuns, time.Since(delStart))
-
-	assertEqualStats(t, 0, 0)
-}
-
-func TestMimeEmailInserts(t *testing.T) {
-	setup()
-	defer Close()
-
-	t.Log("Testing mime email storage")
-
-	start := time.Now()
-
-	assertEqualStats(t, 0, 0)
-
-	for i := 0; i < testRuns; i++ {
-		if _, err := Store(testMimeEmail); err != nil {
-			t.Log("error ", err)
-			t.Fail()
-		}
-	}
-
-	assertEqual(t, CountTotal(), testRuns, "Incorrect number of mime emails stored")
-
-	t.Logf("Inserted %d text emails in %s", testRuns, time.Since(start))
-
-	assertEqualStats(t, testRuns, testRuns)
-
-	delStart := time.Now()
-	if err := DeleteAllMessages(); err != nil {
-		t.Log("error ", err)
-		t.Fail()
-	}
-
-	assertEqual(t, CountTotal(), 0, "incorrect number of mime emails deleted")
-
-	t.Logf("Deleted %d mime emails in %s", testRuns, time.Since(delStart))
-
-	assertEqualStats(t, 0, 0)
-}
-
-func TestRetrieveMimeEmail(t *testing.T) {
-	setup()
-	defer Close()
-
-	t.Log("Testing mime email retrieval")
-
-	id, err := Store(testMimeEmail)
-	if err != nil {
-		t.Log("error ", err)
-		t.Fail()
-	}
-
-	msg, err := GetMessage(id)
-	if err != nil {
-		t.Log("error ", err)
-		t.Fail()
-	}
-
-	assertEqual(t, msg.From.Name, "Sender Smith", "\"From\" name does not match")
-	assertEqual(t, msg.From.Address, "sender@example.com", "\"From\" address does not match")
-	assertEqual(t, msg.Subject, "inline + attachment", "subject does not match")
-	assertEqual(t, len(msg.To), 1, "incorrect number of recipients")
-	assertEqual(t, msg.To[0].Name, "Recipient Ross", "\"To\" name does not match")
-	assertEqual(t, msg.To[0].Address, "recipient@example.com", "\"To\" address does not match")
-	assertEqual(t, len(msg.Attachments), 1, "incorrect number of attachments")
-	assertEqual(t, msg.Attachments[0].FileName, "Sample PDF.pdf", "attachment filename does not match")
-	assertEqual(t, len(msg.Inline), 1, "incorrect number of inline attachments")
-	assertEqual(t, msg.Inline[0].FileName, "inline-image.jpg", "inline attachment filename does not match")
-
-	attachmentData, err := GetAttachmentPart(id, msg.Attachments[0].PartID)
-	if err != nil {
-		t.Log("error ", err)
-		t.Fail()
-	}
-	assertEqual(t, len(attachmentData.Content), msg.Attachments[0].Size, "attachment size does not match")
-
-	inlineData, err := GetAttachmentPart(id, msg.Inline[0].PartID)
-	if err != nil {
-		t.Log("error ", err)
-		t.Fail()
-	}
-	assertEqual(t, len(inlineData.Content), msg.Inline[0].Size, "inline attachment size does not match")
-}
-
-func TestSearch(t *testing.T) {
-	setup()
-	defer Close()
-
-	t.Log("Testing search")
-	for i := 0; i < testRuns; i++ {
-		msg := enmime.Builder().
-			From(fmt.Sprintf("From %d", i), fmt.Sprintf("from-%d@example.com", i)).
-			Subject(fmt.Sprintf("Subject line %d end", i)).
-			Text([]byte(fmt.Sprintf("This is the email body %d <jdsauk;dwqmdqw;>.", i))).
-			To(fmt.Sprintf("To %d", i), fmt.Sprintf("to-%d@example.com", i))
-
-		env, err := msg.Build()
-		if err != nil {
-			t.Log("error ", err)
-			t.Fail()
-		}
-
-		buf := new(bytes.Buffer)
-
-		if err := env.Encode(buf); err != nil {
-			t.Log("error ", err)
-			t.Fail()
-		}
-
-		if _, err := Store(buf.Bytes()); err != nil {
-			t.Log("error ", err)
-			t.Fail()
-		}
-	}
-
-	for i := 1; i < 51; i++ {
-		// search a random something that will return a single result
-		searchIdx := rand.Intn(4) + 1
-		var search string
-		switch searchIdx {
-		case 1:
-			search = fmt.Sprintf("from-%d@example.com", i)
-		case 2:
-			search = fmt.Sprintf("to-%d@example.com", i)
-		case 3:
-			search = fmt.Sprintf("\"Subject line %d end\"", i)
-		default:
-			search = fmt.Sprintf("\"the email body %d jdsauk dwqmdqw\"", i)
-		}
-
-		summaries, _, err := Search(search, 0, 100)
-		if err != nil {
-			t.Log("error ", err)
-			t.Fail()
-		}
-
-		assertEqual(t, len(summaries), 1, "1 search result expected")
-
-		assertEqual(t, summaries[0].From.Name, fmt.Sprintf("From %d", i), "\"From\" name does not match")
-		assertEqual(t, summaries[0].From.Address, fmt.Sprintf("from-%d@example.com", i), "\"From\" address does not match")
-		assertEqual(t, summaries[0].To[0].Name, fmt.Sprintf("To %d", i), "\"To\" name does not match")
-		assertEqual(t, summaries[0].To[0].Address, fmt.Sprintf("to-%d@example.com", i), "\"To\" address does not match")
-		assertEqual(t, summaries[0].Subject, fmt.Sprintf("Subject line %d end", i), "\"Subject\" does not match")
-	}
-
-	// search something that will return 200 results
-	summaries, _, err := Search("This is the email body", 0, testRuns)
-	if err != nil {
-		t.Log("error ", err)
-		t.Fail()
-	}
-	assertEqual(t, len(summaries), testRuns, "search results expected")
-}
-
-func BenchmarkImportText(b *testing.B) {
-	setup()
-	defer Close()
-
-	for i := 0; i < b.N; i++ {
-		if _, err := Store(testTextEmail); err != nil {
-			b.Log("error ", err)
-			b.Fail()
-		}
-	}
-}
-
-func BenchmarkImportMime(b *testing.B) {
-	setup()
-	defer Close()
-
-	for i := 0; i < b.N; i++ {
-		if _, err := Store(testMimeEmail); err != nil {
-			b.Log("error ", err)
-			b.Fail()
-		}
-	}
-
-}
-
-func setup() {
-	logger.NoLogging = true
-	config.MaxMessages = 0
-	config.DataFile = ""
-
-	if err := InitDB(); err != nil {
-		panic(err)
-	}
-
-	var err error
-
-	testTextEmail, err = ioutil.ReadFile("testdata/plain-text.eml")
-	if err != nil {
-		panic(err)
-	}
-
-	testMimeEmail, err = ioutil.ReadFile("testdata/mime-attachment.eml")
-	if err != nil {
-		panic(err)
-	}
-}
-
-func assertEqual(t *testing.T, a interface{}, b interface{}, message string) {
-	if a == b {
-		return
-	}
-	message = fmt.Sprintf("%s: \"%v\" != \"%v\"", message, a, b)
-	t.Fatal(message)
-}
-
-func assertEqualStats(t *testing.T, total int, unread int) {
-	s := StatsGet()
-	if total != s.Total {
-		t.Fatalf("Incorrect total mailbox stats: \"%d\" != \"%d\"", total, s.Total)
-	}
-
-	if unread != s.Unread {
-		t.Fatalf("Incorrect unread mailbox stats: \"%d\" != \"%d\"", unread, s.Unread)
-	}
-}
--- a/storage/search.go
+++ b/storage/search.go
@@ -1,129 +0,0 @@
-package storage
-
-import (
-	"regexp"
-	"strings"
-
-	"github.com/leporo/sqlf"
-)
-
-// SearchParser returns the SQL syntax for the database search based on the search arguments
-func searchParser(args []string) *sqlf.Stmt {
-	q := sqlf.From("mailbox").
-		Select(`Created, ID, MessageID, Subject, Metadata, Size, Attachments, Read, Tags,
-			IFNULL(json_extract(Metadata, '$.To'), '{}') as ToJSON,
-			IFNULL(json_extract(Metadata, '$.From'), '{}') as FromJSON,
-			IFNULL(json_extract(Metadata, '$.Cc'), '{}') as CcJSON,
-			IFNULL(json_extract(Metadata, '$.Bcc'), '{}') as BccJSON
-		`).OrderBy("Created DESC")
-
-	for _, w := range args {
-		if cleanString(w) == "" {
-			continue
-		}
-
-		exclude := false
-		// search terms starting with a `-` or `!` imply an exclude
-		if len(w) > 1 && (strings.HasPrefix(w, "-") || strings.HasPrefix(w, "!")) {
-			exclude = true
-			w = w[1:]
-		}
-
-		re := regexp.MustCompile(`[a-zA-Z0-9]+`)
-		if !re.MatchString(w) {
-			continue
-		}
-
-		if strings.HasPrefix(w, "to:") {
-			w = cleanString(w[3:])
-			if w != "" {
-				if exclude {
-					q.Where("ToJSON NOT LIKE ?", "%"+escPercentChar(w)+"%")
-				} else {
-					q.Where("ToJSON LIKE ?", "%"+escPercentChar(w)+"%")
-				}
-			}
-		} else if strings.HasPrefix(w, "from:") {
-			w = cleanString(w[5:])
-			if w != "" {
-				if exclude {
-					q.Where("FromJSON NOT LIKE ?", "%"+escPercentChar(w)+"%")
-				} else {
-					q.Where("FromJSON LIKE ?", "%"+escPercentChar(w)+"%")
-				}
-			}
-		} else if strings.HasPrefix(w, "cc:") {
-			w = cleanString(w[3:])
-			if w != "" {
-				if exclude {
-					q.Where("CcJSON NOT LIKE ?", "%"+escPercentChar(w)+"%")
-				} else {
-					q.Where("CcJSON LIKE ?", "%"+escPercentChar(w)+"%")
-				}
-			}
-		} else if strings.HasPrefix(w, "bcc:") {
-			w = cleanString(w[4:])
-			if w != "" {
-				if exclude {
-					q.Where("BccJSON NOT LIKE ?", "%"+escPercentChar(w)+"%")
-				} else {
-					q.Where("BccJSON LIKE ?", "%"+escPercentChar(w)+"%")
-				}
-			}
-		} else if strings.HasPrefix(w, "subject:") {
-			w = cleanString(w[8:])
-			if w != "" {
-				if exclude {
-					q.Where("Subject NOT LIKE ?", "%"+escPercentChar(w)+"%")
-				} else {
-					q.Where("Subject LIKE ?", "%"+escPercentChar(w)+"%")
-				}
-			}
-		} else if strings.HasPrefix(w, "message-id:") {
-			w = cleanString(w[11:])
-			if w != "" {
-				if exclude {
-					q.Where("MessageID NOT LIKE ?", "%"+escPercentChar(w)+"%")
-				} else {
-					q.Where("MessageID LIKE ?", "%"+escPercentChar(w)+"%")
-				}
-			}
-		} else if strings.HasPrefix(w, "tag:") {
-			w = cleanString(w[4:])
-			if w != "" {
-				if exclude {
-					q.Where("Tags NOT LIKE ?", "%\""+escPercentChar(w)+"\"%")
-				} else {
-					q.Where("Tags LIKE ?", "%\""+escPercentChar(w)+"\"%")
-				}
-			}
-		} else if w == "is:read" {
-			if exclude {
-				q.Where("Read = 0")
-			} else {
-				q.Where("Read = 1")
-			}
-		} else if w == "is:unread" {
-			if exclude {
-				q.Where("Read = 1")
-			} else {
-				q.Where("Read = 0")
-			}
-		} else if w == "has:attachment" || w == "has:attachments" {
-			if exclude {
-				q.Where("Attachments = 0")
-			} else {
-				q.Where("Attachments > 0")
-			}
-		} else {
-			// search text
-			if exclude {
-				q.Where("SearchText NOT LIKE ?", "%"+cleanString(escPercentChar(w))+"%")
-			} else {
-				q.Where("SearchText LIKE ?", "%"+cleanString(escPercentChar(w))+"%")
-			}
-		}
-	}
-
-	return q
-}
Author	SHA1	Message	Date
Ralph Slooten	55bdd45247	Merge branch 'release/v1.9.3'	2023-09-27 17:32:15 +13:00
Ralph Slooten	0b3a5fc5d8	Release v1.9.3	2023-09-27 17:32:15 +13:00
Ralph Slooten	3e90391991	Merge branch 'feature/ui-tests' into develop	2023-09-27 17:29:20 +13:00
Ralph Slooten	ae15cac727	Testing: Add endpoints for integration tests See #166	2023-09-27 17:29:03 +13:00
Ralph Slooten	1020f76bf8	UI: Do not show excluded search tags as "current" in nav	2023-09-26 19:04:04 +13:00
Ralph Slooten	42a1fe1510	UI: Display "Loading messages" instead of "No results" while loading results	2023-09-26 16:51:30 +13:00
Ralph Slooten	628b7e7881	Code cleanup	2023-09-25 22:14:39 +13:00
Ralph Slooten	fe5de77253	Tests: Add more API tests	2023-09-25 22:14:19 +13:00
Ralph Slooten	36eef88885	Merge branch 'feature/structure' into develop	2023-09-25 19:39:08 +13:00
Ralph Slooten	737cff5a96	Chore: Update internal/storage import paths	2023-09-25 19:29:32 +13:00
Ralph Slooten	009a7deaa1	Chore: Move storage package to internal/storage	2023-09-25 19:29:31 +13:00
Ralph Slooten	b6d5a8c182	Chore: Update internal import paths	2023-09-25 19:29:30 +13:00
Ralph Slooten	10224e7c8b	Chore: Move utils/* packages to internal/*	2023-09-25 19:29:02 +13:00
Ralph Slooten	d2086922e5	UI: Only queue broadcast events if clients are connected	2023-09-25 16:53:25 +13:00
Ralph Slooten	3c744edd20	Tests: Add tests for ArgsParser & CleanTag	2023-09-25 16:07:11 +13:00
Ralph Slooten	7ed522e596	Merge tag 'v1.9.2' into develop Release v1.9.2	2023-09-24 19:16:29 +13:00
Ralph Slooten	26c6f9d965	Merge branch 'release/v1.9.2'	2023-09-24 19:16:23 +13:00
Ralph Slooten	76a261bf06	Release v1.9.2	2023-09-24 19:16:22 +13:00
Ralph Slooten	86a3bea300	Libs: Update node modules	2023-09-24 19:14:46 +13:00
Ralph Slooten	5fa6b20a53	Update tag test message	2023-09-24 19:10:41 +13:00
Ralph Slooten	3ad62769a6	Tests: Add message tag tests	2023-09-24 19:08:47 +13:00
Ralph Slooten	a63952aee6	Tests: Add search delete tests	2023-09-24 17:29:27 +13:00
Ralph Slooten	de95910539	Change recipients <name>2@example.com	2023-09-24 17:27:02 +13:00
Ralph Slooten	60a41ce3ca	Fix: Delete all messages matching search when more than 1000 results	2023-09-24 13:07:16 +13:00
Ralph Slooten	898b36ce0b	UI: Reset pagination when returning to inbox from search	2023-09-24 12:24:52 +13:00
Ralph Slooten	b4a4d44492	Merge tag 'v1.9.1' into develop Release v1.9.1	2023-09-23 22:58:14 +12:00
Ralph Slooten	64e4e4240a	Merge branch 'release/v1.9.1'	2023-09-23 22:58:11 +12:00
Ralph Slooten	0477c6573f	Release v1.9.1	2023-09-23 22:58:10 +12:00
Ralph Slooten	28ac6d2099	UI: Set 404 page when loading a non-existent message	2023-09-23 15:49:43 +12:00
Ralph Slooten	43a1dbe3f0	Chore: Update caniemail data	2023-09-23 14:56:57 +12:00
Ralph Slooten	aa3f860540	Libs: Update Go modules	2023-09-23 11:51:29 +12:00
Ralph Slooten	f54a2187ac	UI: Link email addresses in message summary to search	2023-09-23 11:48:06 +12:00
Ralph Slooten	063eab2c6a	UI: Better support for mobile screen sizes	2023-09-23 09:31:02 +12:00
Ralph Slooten	b282e6663b	Remove redundant `Read` status from message (always true)	2023-09-22 21:31:35 +12:00
Ralph Slooten	df777c6e90	Merge tag 'v1.9.0' into develop Release v1.9.0	2023-09-22 16:40:51 +12:00
Ralph Slooten	8c4b1ac445	Merge branch 'release/v1.9.0'	2023-09-22 16:40:49 +12:00
Ralph Slooten	309c56566c	Release v1.9.0	2023-09-22 16:40:48 +12:00
Ralph Slooten	12d47a0f82	Merge branch 'feature/routing' into develop	2023-09-22 16:34:59 +12:00
Ralph Slooten	27d601294a	Libs: Update minimum Go version to 1.20	2023-09-22 16:34:47 +12:00
Ralph Slooten	98343714be	Tests: Bump Go version to 1.21	2023-09-22 15:32:51 +12:00
Ralph Slooten	930901c4ec	Libs: Update Go modules	2023-09-22 15:27:58 +12:00
Ralph Slooten	446cae145f	Update regex in string cleaner	2023-09-22 15:27:02 +12:00
Ralph Slooten	6a4e5fb03c	UI: Rewrite web UI, add URL routing and components See #156	2023-09-22 15:06:03 +12:00
Ralph Slooten	8f0549c596	Libs: Update node modules	2023-09-22 15:01:33 +12:00
Ralph Slooten	4a762c502e	Add Swagger note	2023-09-22 07:11:13 +12:00
Ralph Slooten	9af04f83a3	API: Remove redundant `Read` status from message (always true)	2023-09-22 07:07:40 +12:00
Ralph Slooten	8e0c174bf3	Code cleanup	2023-09-22 07:02:15 +12:00
Ralph Slooten	b193851269	API: Delete by search filter See #164	2023-09-22 07:00:02 +12:00
Ralph Slooten	95e346f8af	Improved search parser	2023-09-22 06:55:51 +12:00
Ralph Slooten	582f1f88b2	API: Add endpoint to return all tags in use	2023-09-22 06:55:20 +12:00
Ralph Slooten	0d084cfa1d	Feature: Improved search parser	2023-09-22 06:46:23 +12:00
Ralph Slooten	aa0af5de32	Update api search docs	2023-09-15 19:08:53 +12:00
Ralph Slooten	ee49149df9	Feature: New search filter `[!]is:tagged` See #164	2023-09-14 22:30:20 +12:00
Ralph Slooten	e18c45d0b3	Fix: Correctly escape certain characters in search (eg: `'`)	2023-09-14 22:30:10 +12:00
Ralph Slooten	87a68f6a53	Merge tag 'v1.8.4' into develop Release v1.8.4	2023-09-06 17:29:33 +12:00