Phase 4: triage actions (delete, move, mark; bulk select) (AUD-70)
Bulk select in the triage list, with delete/move/mark and a recoverable delete (FR-6, FR-9). - migration v4: messages.folder + messages.mailbox; folder/category views - internal/mailops: app folder -> Gmail label moves over IMAP (IPv4), locate by X-GM-MSGID, create labels lazily, move/save/reply/restore, flag marks - mailfetch: CREATE, UID MOVE (COPY+EXPUNGE fallback), STORE flags, X-GM-MSGID search - server: POST /actions/bulk with CSRF, UI delete confirmation, second confirmation for messages classified Spam (never auto-deleted), per-message and summary action-log rows (FR-13) - inbox: select-all toolbar, checkboxes, folder nav, Restore on non-inbox rows Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
@@ -375,3 +375,40 @@ a:hover { text-decoration: underline; }
|
||||
.category-rename { grid-template-columns: 1fr; }
|
||||
.category-remove .btn { width: 100%; }
|
||||
}
|
||||
|
||||
/* Phase 4: bulk triage toolbar (FR-6) and recoverable-delete views (FR-9) */
|
||||
.bulk-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
flex-wrap: wrap;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-bottom: 1px solid var(--hairline);
|
||||
background: var(--surface);
|
||||
}
|
||||
.bulk-check {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
min-height: 44px;
|
||||
font: var(--type-body-sm);
|
||||
color: var(--ink-secondary);
|
||||
}
|
||||
.bulk-check input,
|
||||
.msg-select {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex: 0 0 auto;
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
.selected-count { font: var(--type-caption); color: var(--ink-faint); }
|
||||
.bulk-actions { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
|
||||
.view-label {
|
||||
margin-left: auto;
|
||||
font: var(--type-eyebrow);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .125px;
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
.btn-small { min-height: 32px; padding: 0 var(--space-sm); font: var(--type-caption); }
|
||||
.scan-note-error { color: var(--sticker-red); }
|
||||
|
||||
@@ -49,13 +49,15 @@
|
||||
<a class="nav-edit" href="/categories">Edit</a>
|
||||
</div>
|
||||
<div class="nav-group-items">
|
||||
<a class="nav-item nav-item-active" href="#">
|
||||
<a class="nav-item nav-item-active" href="#"
|
||||
hx-get="/partials/inbox?folder=all" hx-target="#inbox-list" hx-swap="innerHTML">
|
||||
<span class="dot" style="background: var(--primary)"></span>
|
||||
<span>All mail</span>
|
||||
<span class="count">{{.Total}}</span>
|
||||
</a>
|
||||
{{range .Categories}}
|
||||
<a class="nav-item" href="#">
|
||||
<a class="nav-item" href="#"
|
||||
hx-get="/partials/inbox?{{.Param}}" hx-target="#inbox-list" hx-swap="innerHTML">
|
||||
<span class="dot" style="background: {{.Color}}; {{if not .Count}}opacity:.35;{{end}}"></span>
|
||||
<span>{{.Name}}</span>
|
||||
<span class="count">{{.Count}}</span>
|
||||
@@ -67,10 +69,11 @@
|
||||
<div class="nav-group-title">Folders</div>
|
||||
<div class="nav-group-items">
|
||||
{{range .Folders}}
|
||||
<a class="nav-item" href="#">
|
||||
<a class="nav-item" href="#"
|
||||
hx-get="/partials/inbox?{{.Param}}" hx-target="#inbox-list" hx-swap="innerHTML">
|
||||
<span class="dot" style="background: {{.Color}}"></span>
|
||||
<span>{{.Name}}</span>
|
||||
<span class="count">0</span>
|
||||
<span class="count">{{.Count}}</span>
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
@@ -119,5 +122,31 @@
|
||||
</main>
|
||||
|
||||
<script src="/static/htmx.min.js" defer></script>
|
||||
<script>
|
||||
// Bulk-select state for the Phase 4 triage toolbar. The message list is
|
||||
// swapped by HTMX, so the handlers live on the document (delegation).
|
||||
function eaSelectedIds() {
|
||||
return document.querySelectorAll('#bulk-items input[name="ids"]:checked');
|
||||
}
|
||||
function eaUpdateSelected() {
|
||||
var el = document.getElementById('selected-count');
|
||||
if (el) el.textContent = eaSelectedIds().length + ' selected';
|
||||
}
|
||||
document.addEventListener('change', function (e) {
|
||||
if (!e.target) return;
|
||||
if (e.target.id === 'select-all') {
|
||||
var on = e.target.checked;
|
||||
document.querySelectorAll('#bulk-items input[name="ids"]').forEach(function (cb) { cb.checked = on; });
|
||||
eaUpdateSelected();
|
||||
} else if (e.target.name === 'ids') {
|
||||
eaUpdateSelected();
|
||||
}
|
||||
});
|
||||
document.body.addEventListener('htmx:afterSwap', function () {
|
||||
var sa = document.getElementById('select-all');
|
||||
if (sa) sa.checked = false;
|
||||
eaUpdateSelected();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,34 +1,91 @@
|
||||
<div class="scan-note-slot">
|
||||
{{if .Note}}<div class="scan-note" role="status">{{.Note}}</div>{{end}}
|
||||
{{if .Error}}<div class="scan-note scan-note-error" role="alert">{{.Error}}</div>{{end}}
|
||||
</div>
|
||||
|
||||
{{if .Groups}}
|
||||
{{range .Groups}}
|
||||
<section class="msg-group" aria-label="{{.Name}}">
|
||||
<div class="msg-group-head">
|
||||
<span class="msg-group-name">{{.Name}}</span>
|
||||
<span class="count">{{len .Messages}}</span>
|
||||
</div>
|
||||
{{range .Messages}}
|
||||
<div class="msg-row">
|
||||
<div class="msg-main">
|
||||
<div class="msg-from">{{.From}}</div>
|
||||
<div class="msg-subject">{{.Subject}}</div>
|
||||
{{if .SourceAddr}}<div class="msg-source">arrived at <span class="source-addr">{{.SourceAddr}}</span></div>{{end}}
|
||||
</div>
|
||||
<div class="msg-meta">
|
||||
<span class="pill action-pill">{{.Action}}</span>
|
||||
{{if .Classified}}<span class="msg-confidence" title="Classifier confidence">{{.Confidence}}%</span>{{end}}
|
||||
{{if .When}}<span class="msg-when">{{.When}}</span>{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</section>
|
||||
{{end}}
|
||||
{{else}}
|
||||
<div class="empty-state">
|
||||
<div class="empty-title">No messages yet</div>
|
||||
<p class="empty-copy">Use <strong>Check mail</strong> to fetch from Gmail, then <strong>Classify</strong> to let JEV sort each message.</p>
|
||||
<span class="pill">No stored messages</span>
|
||||
<div class="bulk-toolbar" aria-label="Bulk actions">
|
||||
<label class="bulk-check">
|
||||
<input type="checkbox" id="select-all">
|
||||
<span>Select all</span>
|
||||
</label>
|
||||
<span class="selected-count" id="selected-count">0 selected</span>
|
||||
<div class="bulk-actions">
|
||||
<button type="button" class="btn btn-utility btn-danger"
|
||||
hx-post="/actions/bulk" hx-include="#bulk-items" hx-target="#inbox-list" hx-swap="innerHTML"
|
||||
hx-vals='{"action":"delete","confirm":"yes","spam_confirm":"yes"}'
|
||||
hx-confirm="Move the selected messages to the Delete folder? They can be restored from there. This applies to every selected row, including anything classified Spam.">
|
||||
Delete
|
||||
</button>
|
||||
<button type="button" class="btn btn-utility"
|
||||
hx-post="/actions/bulk" hx-include="#bulk-items" hx-target="#inbox-list" hx-swap="innerHTML"
|
||||
hx-vals='{"action":"save"}'>
|
||||
Save
|
||||
</button>
|
||||
<button type="button" class="btn btn-utility"
|
||||
hx-post="/actions/bulk" hx-include="#bulk-items" hx-target="#inbox-list" hx-swap="innerHTML"
|
||||
hx-vals='{"action":"reply"}'>
|
||||
Mark replied
|
||||
</button>
|
||||
<button type="button" class="btn btn-utility"
|
||||
hx-post="/actions/bulk" hx-include="#bulk-items" hx-target="#inbox-list" hx-swap="innerHTML"
|
||||
hx-vals='{"action":"mark_read"}'>
|
||||
Mark read
|
||||
</button>
|
||||
<button type="button" class="btn btn-utility"
|
||||
hx-post="/actions/bulk" hx-include="#bulk-items" hx-target="#inbox-list" hx-swap="innerHTML"
|
||||
hx-vals='{"action":"mark_unread"}'>
|
||||
Mark unread
|
||||
</button>
|
||||
<button type="button" class="btn btn-utility"
|
||||
hx-post="/actions/bulk" hx-include="#bulk-items" hx-target="#inbox-list" hx-swap="innerHTML"
|
||||
hx-vals='{"action":"star"}'>
|
||||
Star
|
||||
</button>
|
||||
</div>
|
||||
<span class="view-label">{{.FolderLabel}}</span>
|
||||
</div>
|
||||
|
||||
<div id="bulk-items">
|
||||
<input type="hidden" id="bulk-csrf" name="csrf" value="{{.CSRFToken}}">
|
||||
<input type="hidden" name="folder" value="{{.Folder}}">
|
||||
<input type="hidden" name="category" value="{{.Category}}">
|
||||
|
||||
{{if .Groups}}
|
||||
{{range .Groups}}
|
||||
<section class="msg-group" aria-label="{{.Name}}">
|
||||
<div class="msg-group-head">
|
||||
<span class="msg-group-name">{{.Name}}</span>
|
||||
<span class="count">{{len .Messages}}</span>
|
||||
</div>
|
||||
{{range .Messages}}
|
||||
<div class="msg-row">
|
||||
<input class="msg-select" type="checkbox" name="ids" value="{{.ID}}" aria-label="Select message from {{.From}}">
|
||||
<div class="msg-main">
|
||||
<div class="msg-from">{{.From}}</div>
|
||||
<div class="msg-subject">{{.Subject}}</div>
|
||||
{{if .SourceAddr}}<div class="msg-source">arrived at <span class="source-addr">{{.SourceAddr}}</span></div>{{end}}
|
||||
</div>
|
||||
<div class="msg-meta">
|
||||
<span class="pill action-pill">{{.Action}}</span>
|
||||
{{if .Classified}}<span class="msg-confidence" title="Classifier confidence">{{.Confidence}}%</span>{{end}}
|
||||
{{if .When}}<span class="msg-when">{{.When}}</span>{{end}}
|
||||
{{if .Restorable}}
|
||||
<button type="button" class="btn btn-utility btn-small"
|
||||
hx-post="/actions/bulk" hx-include="#bulk-csrf" hx-target="#inbox-list" hx-swap="innerHTML"
|
||||
hx-vals='{"action":"restore","confirm":"yes","ids":"{{.ID}}"}'>
|
||||
Restore
|
||||
</button>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</section>
|
||||
{{end}}
|
||||
{{else}}
|
||||
<div class="empty-state">
|
||||
<div class="empty-title">Nothing in {{.FolderLabel}}</div>
|
||||
<p class="empty-copy">Use <strong>Check mail</strong> to fetch from Gmail, then <strong>Classify</strong> to let JEV sort each message.</p>
|
||||
<span class="pill">No messages</span>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user