From fa9edca3bd596d6a1c2691ba1fc66d5288883d59 Mon Sep 17 00:00:00 2001
From: DonVoo <donvoo@golddata.eu>
Date: Mon, 6 Jul 2026 15:12:55 +0200
Subject: [PATCH] Move pane toggle buttons beside dropdowns

---
 backend/00-router.go       |  4 ++--
 backend/08-viewer.go       | 20 ++++++++++----------
 frontend-js/dist/style.css | 15 +++++----------
 3 files changed, 17 insertions(+), 22 deletions(-)
diff --git a/backend/00-router.go b/backend/00-router.go
index f189ef4..71fe036 100644
--- a/backend/00-router.go
+++ b/backend/00-router.go
@@ -43,9 +43,9 @@ func renderShell(w http.ResponseWriter, active, readingPane string) {
 	fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Mail-Graveyard</title>
-<link rel="stylesheet" href="/static/style.css?v=20260706-3">
+<link rel="stylesheet" href="/static/style.css?v=20260706-4">
 <script src="/static/htmx.min.js"></script>
-<script src="/static/app.js?v=20260706-3" defer></script></head>
+<script src="/static/app.js?v=20260706-4" defer></script></head>
 <body class="ol2013">
 <header class="ribbon">
   <nav class="ribbon-tabs">
diff --git a/backend/08-viewer.go b/backend/08-viewer.go
index ac8baeb..e26e786 100644
--- a/backend/08-viewer.go
+++ b/backend/08-viewer.go
@@ -282,11 +282,11 @@ func renderInitialReadPane(body string) string {
 
 func renderInitialSourceSelectPane(body string) string {
 	var b strings.Builder
-	b.WriteString(`<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/select" hx-target="#read" hx-swap="innerHTML">Ziel</button></div><form class="target-select-form"><select id="source-account-select" name="source" class="target-select">`)
+	b.WriteString(`<div class="pane-head mode-head"><span class="mode-label">Quelle</span><form class="target-select-form"><select id="source-account-select" name="source" class="target-select">`)
 	for _, opt := range sourceAccountOptions() {
 		fmt.Fprintf(&b, `<option value="%s">%s</option>`, html.EscapeString(opt.Value), html.EscapeString(opt.Label))
 	}
-	b.WriteString(`</select></form></div><div class="read-body">`)
+	b.WriteString(`</select></form><button class="btn secondary compact" type="button" hx-get="/view/target/select" hx-target="#read" hx-swap="innerHTML">Ziel</button></div><div class="read-body">`)
 	b.WriteString(body)
 	b.WriteString(`</div>`)
 	return b.String()
@@ -294,7 +294,7 @@ func renderInitialSourceSelectPane(body string) string {
 
 func renderInitialTargetSelectPane(selected string) string {
 	var b strings.Builder
-	b.WriteString(`<div class="pane-head mode-head"><div class="mode-switch"><button class="btn secondary compact" type="button" hx-get="/view/source/select" hx-target="#read" hx-swap="innerHTML">Quelle</button><button class="btn compact active" type="button">Ziel</button></div><form class="target-select-form"><select id="target-account-select" name="target_account" class="target-select"><option value="">Automatisch</option>`)
+	b.WriteString(`<div class="pane-head mode-head"><span class="mode-label">Ziel</span><form class="target-select-form"><select id="target-account-select" name="target_account" class="target-select"><option value="">Automatisch</option>`)
 	for _, opt := range targetAccountOptions() {
 		attr := ""
 		if opt.Value == selected {
@@ -302,7 +302,7 @@ func renderInitialTargetSelectPane(selected string) string {
 		}
 		fmt.Fprintf(&b, `<option value="%s"%s>%s</option>`, html.EscapeString(opt.Value), attr, html.EscapeString(opt.Label))
 	}
-	b.WriteString(`</select></form></div><div class="read-body"><div class="ef-empty">Nachricht waehlen.</div></div>`)
+	b.WriteString(`</select></form><button class="btn secondary compact" type="button" hx-get="/view/source/select" hx-target="#read" hx-swap="innerHTML">Quelle</button></div><div class="read-body"><div class="ef-empty">Nachricht waehlen.</div></div>`)
 	return b.String()
 }
 
@@ -479,8 +479,7 @@ 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 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))
+	b.WriteString(`<div class="pane-head mode-head"><span class="mode-label">Ziel</span><form class="target-select-form"`)
 	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"`)
 	}
@@ -497,7 +496,8 @@ 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))
 	}
-	b.WriteString(`</select></form></div>`)
+	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>`,
+		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)
@@ -507,12 +507,11 @@ func renderTargetAccountSelect(account, folder, selected string, index int) stri
 
 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">
+	fmt.Fprintf(&b, `<div class="pane-head mode-head"><span class="mode-label">Quelle</span><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 := ""
@@ -521,7 +520,8 @@ func renderSourcePaneHead(account, folder, targetAccount string, index int) stri
 		}
 		fmt.Fprintf(&b, `<option value="%s"%s>%s</option>`, html.EscapeString(opt.Value), attr, html.EscapeString(opt.Label))
 	}
-	b.WriteString(`</select></form></div>`)
+	fmt.Fprintf(&b, `</select></form><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>`,
+		urlEsc(sourceDisplayLabel(account)), urlEsc(folder), index, urlEsc(targetAccount))
 	return b.String()
 }
 
diff --git a/frontend-js/dist/style.css b/frontend-js/dist/style.css
index 828dab6..09ea2ac 100644
--- a/frontend-js/dist/style.css
+++ b/frontend-js/dist/style.css
@@ -90,19 +90,14 @@ body.resizing { cursor: col-resize; user-select: none; }
 }
 .mode-head {
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-columns: auto minmax(0, 1fr) auto;
   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;
+.mode-label {
+  min-width: 44px;
+  color: var(--ol-muted);
+  font-weight: 700;
 }
 .target-select-form { margin: 0; min-width: 0; }
 .target-select {
