Add source and target pane selectors

backend/08-viewer.go

@@ -210,8 +210,9 @@ func renderReadPane(w io.Writer, title, account, folder, targetAccount string, i
 	if subject == "" {
 		subject = "(ohne Betreff)"
 	}
-	fmt.Fprintf(w, `<div class="pane-head read-toolbar"><span>%s</span><button class="btn secondary compact" type="button" hx-get="/view/target?source=%s&amp;folder=%s&amp;index=%d&amp;target_account=%s" hx-target="#read" hx-swap="innerHTML">Target</button></div><div class="read-body"><div class="read-head"><h1 class="read-subject">%s</h1><div class="read-meta">Von: %s<br>Datum: %s</div></div><pre class="read-pre">%s</pre></div>`,
+	fmt.Fprint(w, renderSourcePaneHead(account, folder, targetAccount, index))
-		html.EscapeString(title), urlEsc(sourceDisplayLabel(account)), urlEsc(folder), index, urlEsc(targetAccount), html.EscapeString(subject), html.EscapeString(from), html.EscapeString(date), html.EscapeString(body))
+	fmt.Fprintf(w, `<div class="read-body"><div class="read-head"><h1 class="read-subject">%s</h1><div class="read-meta">Von: %s<br>Datum: %s</div></div><pre class="read-pre">%s</pre></div>`,
+		html.EscapeString(subject), html.EscapeString(from), html.EscapeString(date), html.EscapeString(body))
 }
 
 func renderTargetPane(account, folder, targetAccount string, index int, raw []byte, note string) string {
@@ -258,7 +259,7 @@ func renderTargetMatch(b *strings.Builder, match forwardedMatch) {
 }
 
 func renderInitialTargetPane() string {
-	return `<div class="pane-head">Quelle</div><div class="read-body"><div class="ef-empty">Nachricht waehlen.</div></div>`
+	return `<div class="pane-head mode-head"><div class="mode-switch"><button class="btn compact active" type="button">Quelle</button><button class="btn secondary compact" type="button">Ziel</button></div><div></div></div><div class="read-body"><div class="ef-empty">Nachricht waehlen.</div></div>`
 }
 
 func renderReadContent(w io.Writer, subject, from, date, body string) {
@@ -434,7 +435,8 @@ func messageIDHeader(raw []byte) string {
 func renderTargetAccountSelect(account, folder, selected string, index int) string {
 	options := targetAccountOptions()
 	var b strings.Builder
-	fmt.Fprintf(&b, `<div class="pane-head target-head"><span>Target</span><form class="target-select-form"`)
+	fmt.Fprintf(&b, `<div class="pane-head mode-head"><div class="mode-switch"><button class="btn secondary compact" type="button" hx-get="/view/message?source=%s&amp;folder=%s&amp;index=%d&amp;target_account=%s" hx-target="#read" hx-swap="innerHTML">Quelle</button><button class="btn compact active" type="button">Ziel</button></div><form class="target-select-form"`,
+		urlEsc(sourceDisplayLabel(account)), urlEsc(folder), index, urlEsc(selected))
 	if account != "" && folder != "" && index >= 0 {
 		fmt.Fprintf(&b, ` hx-get="/view/target" hx-target="#read" hx-swap="innerHTML" hx-trigger="change from:#target-account-select"`)
 	}
@@ -451,8 +453,7 @@ func renderTargetAccountSelect(account, folder, selected string, index int) stri
 		}
 		fmt.Fprintf(&b, `<option value="%s"%s>%s</option>`, html.EscapeString(opt.Value), attr, html.EscapeString(opt.Label))
 	}
-	fmt.Fprintf(&b, `</select></form><button class="btn secondary compact" type="button" hx-get="/view/message?source=%s&amp;folder=%s&amp;index=%d&amp;target_account=%s" hx-target="#read" hx-swap="innerHTML">Quelle</button></div>`,
+	b.WriteString(`</select></form></div>`)
-		urlEsc(sourceDisplayLabel(account)), urlEsc(folder), index, urlEsc(selected))
 	if account != "" && folder != "" && index >= 0 {
 		fmt.Fprintf(&b, `<div class="drop-zone" data-drop-target="manual-copy" data-source="%s" data-folder="%s" data-index="%d">Mail hier ablegen fuer manuellen Umzug</div>`,
 			html.EscapeString(sourceDisplayLabel(account)), html.EscapeString(folder), index)
@@ -460,6 +461,26 @@ func renderTargetAccountSelect(account, folder, selected string, index int) stri
 	return b.String()
 }
 
+func renderSourcePaneHead(account, folder, targetAccount string, index int) string {
+	var b strings.Builder
+	fmt.Fprintf(&b, `<div class="pane-head mode-head"><div class="mode-switch"><button class="btn compact active" type="button">Quelle</button><button class="btn secondary compact" type="button" hx-get="/view/target?source=%s&amp;folder=%s&amp;index=%d&amp;target_account=%s" hx-target="#read" hx-swap="innerHTML">Ziel</button></div><form class="target-select-form" hx-get="/view/message" hx-target="#read" hx-swap="innerHTML" hx-trigger="change from:#source-account-select">
+<input type="hidden" name="folder" value="%s">
+<input type="hidden" name="index" value="%d">
+<input type="hidden" name="target_account" value="%s">
+<select id="source-account-select" name="source" class="target-select">`,
+		urlEsc(sourceDisplayLabel(account)), urlEsc(folder), index, urlEsc(targetAccount),
+		html.EscapeString(folder), index, html.EscapeString(targetAccount))
+	for _, opt := range sourceAccountOptions() {
+		attr := ""
+		if opt.Value == sourceDisplayLabel(account) {
+			attr = ` selected`
+		}
+		fmt.Fprintf(&b, `<option value="%s"%s>%s</option>`, html.EscapeString(opt.Value), attr, html.EscapeString(opt.Label))
+	}
+	b.WriteString(`</select></form></div>`)
+	return b.String()
+}
+
 func appendManualTargetCopy(account, folder, targetAccount string, raw []byte) (string, error) {
 	id := messageIDHeader(raw)
 	if id == "" {
@@ -659,6 +680,23 @@ func targetAccountOptions() []targetAccountOption {
 	return out
 }
 
+func sourceAccountOptions() []targetAccountOption {
+	accounts := viewerAccounts()
+	out := make([]targetAccountOption, 0, len(accounts))
+	for _, a := range accounts {
+		value := a.DisplayLabel
+		if value == "" {
+			value = a.Name
+		}
+		label := a.SourceLabel
+		if label == "" {
+			label = value
+		}
+		out = append(out, targetAccountOption{Value: value, Label: label})
+	}
+	return out
+}
+
 func targetMboxDirs(targetUser string) map[string]bool {
 	out := map[string]bool{}
 	if targetUser == "" || DB == nil {

frontend-js/dist/style.css

@@ -88,6 +88,22 @@ body.resizing { cursor: col-resize; user-select: none; }
   align-items: center;
   gap: 10px;
 }
+.mode-head {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+}
+.mode-switch {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+.mode-switch .btn.active {
+  background: var(--ol-blue);
+  color: #fff;
+}
 .target-select-form { margin: 0; min-width: 0; }
 .target-select {
   width: 100%;