From b475b03b9ef75fa5cbd292060363cb940927df58 Mon Sep 17 00:00:00 2001
From: DonVoo <donvoo@golddata.eu>
Date: Mon, 13 Jul 2026 01:35:21 +0200
Subject: [PATCH] Add top bar logout button

---
 backend/00-router.go       | 42 +++++++++++++++++++-------------------
 backend/03-auth.go         |  6 +++---
 frontend-js/dist/style.css |  9 ++++++++
 3 files changed, 33 insertions(+), 24 deletions(-)
diff --git a/backend/00-router.go b/backend/00-router.go
index 6a53f86..92ab156 100644
--- a/backend/00-router.go
+++ b/backend/00-router.go
@@ -66,9 +66,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=20260712-18">
+<link rel="stylesheet" href="/static/style.css?v=20260712-19">
 <script src="/static/htmx.min.js"></script>
-<script src="/static/app.js?v=20260712-18" defer></script></head>
+<script src="/static/app.js?v=20260712-19" defer></script></head>
 <body class="ol2013">
 <header class="ribbon">
   <button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button>
@@ -77,7 +77,7 @@ func renderShell(w http.ResponseWriter, active, readingPane string) {
     %s
     <a class="tab" href="/users">Einstellungen</a>
   </nav>
-  <div class="ribbon-title">Mail-Graveyard</div>
+  <div class="ribbon-title">Mail-Graveyard</div><a class="ribbon-logout" href="/logout">Logout</a>
 </header>
 <aside class="backstage-menu" aria-label="Mail-Graveyard-Menue">
   <a class="backstage-item active" href="/view">Archiv-Boxen</a>
@@ -511,9 +511,9 @@ func renderAccountsPage(w http.ResponseWriter, accounts []Account, edit Account,
 	fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Konten-Verwaltung - Mail-Graveyard</title>
-<link rel="stylesheet" href="/static/style.css?v=20260712-18">
+<link rel="stylesheet" href="/static/style.css?v=20260712-19">
 <script src="/static/htmx.min.js"></script>
-<script src="/static/app.js?v=20260712-18" defer></script></head>
+<script src="/static/app.js?v=20260712-19" defer></script></head>
 <body class="ol2013">
 <header class="ribbon">
   <button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button>
@@ -522,7 +522,7 @@ func renderAccountsPage(w http.ResponseWriter, accounts []Account, edit Account,
     %s
     <a class="tab" href="/users">Einstellungen</a>
   </nav>
-  <div class="ribbon-title">Mail-Graveyard</div>
+  <div class="ribbon-title">Mail-Graveyard</div><a class="ribbon-logout" href="/logout">Logout</a>
 </header>
 <aside class="backstage-menu" aria-label="Mail-Graveyard-Menue">
   <a class="backstage-item" href="/view">Archiv-Boxen</a>
@@ -556,9 +556,9 @@ func renderArchivesPage(w http.ResponseWriter, archives []string, accounts []Acc
 	fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Archiv-mbox Verwaltung - Mail-Graveyard</title>
-<link rel="stylesheet" href="/static/style.css?v=20260712-18">
+<link rel="stylesheet" href="/static/style.css?v=20260712-19">
 <script src="/static/htmx.min.js"></script>
-<script src="/static/app.js?v=20260712-18" defer></script></head>
+<script src="/static/app.js?v=20260712-19" defer></script></head>
 <body class="ol2013">
 <header class="ribbon">
   <button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button>
@@ -567,7 +567,7 @@ func renderArchivesPage(w http.ResponseWriter, archives []string, accounts []Acc
     %s
     <a class="tab" href="/users">Einstellungen</a>
   </nav>
-  <div class="ribbon-title">Mail-Graveyard</div>
+  <div class="ribbon-title">Mail-Graveyard</div><a class="ribbon-logout" href="/logout">Logout</a>
 </header>
 <aside class="backstage-menu" aria-label="Mail-Graveyard-Menue">
   <a class="backstage-item" href="/view">Archiv-Boxen</a>
@@ -604,9 +604,9 @@ func renderUsersPage(w http.ResponseWriter, r *http.Request, users []AppUser, ed
 	fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Benutzerverwaltung - Mail-Graveyard</title>
-<link rel="stylesheet" href="/static/style.css?v=20260712-18">
+<link rel="stylesheet" href="/static/style.css?v=20260712-19">
 <script src="/static/htmx.min.js"></script>
-<script src="/static/app.js?v=20260712-18" defer></script></head>
+<script src="/static/app.js?v=20260712-19" defer></script></head>
 <body class="ol2013">
 <header class="ribbon">
   <button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button>
@@ -615,7 +615,7 @@ func renderUsersPage(w http.ResponseWriter, r *http.Request, users []AppUser, ed
     %s
     <a class="tab active" href="/users">Einstellungen</a>
   </nav>
-  <div class="ribbon-title">Mail-Graveyard</div>
+  <div class="ribbon-title">Mail-Graveyard</div><a class="ribbon-logout" href="/logout">Logout</a>
 </header>
 <aside class="backstage-menu" aria-label="Mail-Graveyard-Menue">
   <a class="backstage-item" href="/view">Archiv-Boxen</a>
@@ -674,9 +674,9 @@ func renderTransferPage(w http.ResponseWriter, mode transferMode, accounts []Acc
 	fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>%s - Mail-Graveyard</title>
-<link rel="stylesheet" href="/static/style.css?v=20260712-18">
+<link rel="stylesheet" href="/static/style.css?v=20260712-19">
 <script src="/static/htmx.min.js"></script>
-<script src="/static/app.js?v=20260712-18" defer></script></head>
+<script src="/static/app.js?v=20260712-19" defer></script></head>
 <body class="ol2013">
 <header class="ribbon">
   <button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button>
@@ -685,7 +685,7 @@ func renderTransferPage(w http.ResponseWriter, mode transferMode, accounts []Acc
     %s
     <a class="tab" href="/users">Einstellungen</a>
   </nav>
-  <div class="ribbon-title">Mail-Graveyard</div>
+  <div class="ribbon-title">Mail-Graveyard</div><a class="ribbon-logout" href="/logout">Logout</a>
 </header>
 <aside class="backstage-menu" aria-label="Mail-Graveyard-Menue">
   <a class="backstage-item" href="/view">Archiv-Boxen</a>
@@ -715,9 +715,9 @@ func renderSourceEmailBoxPage(w http.ResponseWriter, accounts []Account) {
 	fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Quell-Postfach - Mail-Graveyard</title>
-<link rel="stylesheet" href="/static/style.css?v=20260712-18">
+<link rel="stylesheet" href="/static/style.css?v=20260712-19">
 <script src="/static/htmx.min.js"></script>
-<script src="/static/app.js?v=20260712-18" defer></script></head>
+<script src="/static/app.js?v=20260712-19" defer></script></head>
 <body class="ol2013">
 <header class="ribbon">
   <button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button>
@@ -726,7 +726,7 @@ func renderSourceEmailBoxPage(w http.ResponseWriter, accounts []Account) {
     %s
     <a class="tab" href="/users">Einstellungen</a>
   </nav>
-  <div class="ribbon-title">Mail-Graveyard</div>
+  <div class="ribbon-title">Mail-Graveyard</div><a class="ribbon-logout" href="/logout">Logout</a>
 </header>
 <aside class="backstage-menu" aria-label="Mail-Graveyard-Menue">
   <a class="backstage-item" href="/view">Archiv-Boxen</a>
@@ -757,9 +757,9 @@ func renderTargetEmailBoxPage(w http.ResponseWriter, accounts []Account) {
 	fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Ziel-Postfach - Mail-Graveyard</title>
-<link rel="stylesheet" href="/static/style.css?v=20260712-18">
+<link rel="stylesheet" href="/static/style.css?v=20260712-19">
 <script src="/static/htmx.min.js"></script>
-<script src="/static/app.js?v=20260712-18" defer></script></head>
+<script src="/static/app.js?v=20260712-19" defer></script></head>
 <body class="ol2013">
 <header class="ribbon">
   <button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button>
@@ -768,7 +768,7 @@ func renderTargetEmailBoxPage(w http.ResponseWriter, accounts []Account) {
     %s
     <a class="tab" href="/users">Einstellungen</a>
   </nav>
-  <div class="ribbon-title">Mail-Graveyard</div>
+  <div class="ribbon-title">Mail-Graveyard</div><a class="ribbon-logout" href="/logout">Logout</a>
 </header>
 <aside class="backstage-menu" aria-label="Mail-Graveyard-Menue">
   <a class="backstage-item" href="/view">Archiv-Boxen</a>
diff --git a/backend/03-auth.go b/backend/03-auth.go
index 1df6200..7427922 100644
--- a/backend/03-auth.go
+++ b/backend/03-auth.go
@@ -239,7 +239,7 @@ func renderLoginPage(w http.ResponseWriter, errMsg 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>Login - Mail-Graveyard</title>
-<link rel="stylesheet" href="/static/style.css?v=20260712-18"></head>
+<link rel="stylesheet" href="/static/style.css?v=20260712-19"></head>
 <body class="ol2013 login-body">
 <main class="login-card">
   <div class="login-brand"><span class="mail-logo" aria-hidden="true"></span><strong>Mail-Graveyard</strong></div>
@@ -259,7 +259,7 @@ func renderForgotPasswordPage(w http.ResponseWriter, msg 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>Passwort vergessen - Mail-Graveyard</title>
-<link rel="stylesheet" href="/static/style.css?v=20260712-18"></head>
+<link rel="stylesheet" href="/static/style.css?v=20260712-19"></head>
 <body class="ol2013 login-body">
 <main class="login-card">
   <div class="login-brand"><span class="mail-logo" aria-hidden="true"></span><strong>Mail-Graveyard</strong></div>
@@ -278,7 +278,7 @@ func renderResetPasswordPage(w http.ResponseWriter, token, errMsg 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>Passwort setzen - Mail-Graveyard</title>
-<link rel="stylesheet" href="/static/style.css?v=20260712-18"></head>
+<link rel="stylesheet" href="/static/style.css?v=20260712-19"></head>
 <body class="ol2013 login-body">
 <main class="login-card">
   <div class="login-brand"><span class="mail-logo" aria-hidden="true"></span><strong>Mail-Graveyard</strong></div>
diff --git a/frontend-js/dist/style.css b/frontend-js/dist/style.css
index da1de14..b61a44a 100644
--- a/frontend-js/dist/style.css
+++ b/frontend-js/dist/style.css
@@ -70,6 +70,15 @@ body.ol2013 {
   z-index: 20;
 }
 .ribbon-title { margin-left: auto; font-weight: 700; font-size: 15px; letter-spacing: .2px; }
+.ribbon-logout {
+  color: #fff;
+  text-decoration: none;
+  padding: 6px 10px;
+  border: 1px solid rgba(255, 255, 255, .35);
+}
+.ribbon-logout:hover {
+  background: var(--ol-blue-dark);
+}
 .ribbon-tabs { display: flex; gap: 2px; height: 100%; }
 .app-menu-button {
   width: 54px;
