From 2fcc741f5e3146ce72eaf057d5d4897f4ac3b2be Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Thu, 4 Jun 2026 19:22:43 +0200
Subject: [PATCH] style: style email link in footer as icon badge similar to
 Ko-Fi badge

---
 client/src/App.css                  | 21 +++++++++++++++++++++
 client/src/components/AppFooter.tsx | 21 +++++++++++++--------
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/client/src/App.css b/client/src/App.css
index ea1806b..2c398af 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -5642,6 +5642,27 @@ html.theme-cupertino .events-scroll-container {
   border-color: rgba(255, 94, 91, 0.32);
 }
 
+.mail-footer-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #94a3b8;
+  text-decoration: none;
+  background: rgba(56, 189, 248, 0.08);
+  border: 1px solid rgba(56, 189, 248, 0.18);
+  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+}
+
+.mail-footer-badge:hover {
+  color: #bae6fd;
+  background: rgba(56, 189, 248, 0.14);
+  border-color: rgba(56, 189, 248, 0.32);
+}
+
 .demo-badge {
   display: inline-flex;
   align-items: center;
diff --git a/client/src/components/AppFooter.tsx b/client/src/components/AppFooter.tsx
index 749012a..8d5bc3f 100644
--- a/client/src/components/AppFooter.tsx
+++ b/client/src/components/AppFooter.tsx
@@ -1,4 +1,4 @@
-import { Coffee } from 'lucide-react'
+import { Coffee, Mail } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
 
@@ -15,17 +15,22 @@ export default function AppFooter() {
         ·
       </span>
       <span className="app-version-footer__copyright">
-        © 2026 KnorrLabs/
-        <a
-          href="mailto:moin@kapteins-daagbok.eu"
-          onClick={() => trackPlausibleEvent(PlausibleEvents.FOOTER_LINK_CLICKED)}
-        >
-          Markus F.J. Busche
-        </a>
+        © 2026 KnorrLabs
       </span>
       <span className="app-version-footer__sep" aria-hidden="true">
         ·
       </span>
+      <a
+        className="mail-footer-badge"
+        href="mailto:moin@kapteins-daagbok.eu"
+        onClick={() => trackPlausibleEvent(PlausibleEvents.FOOTER_LINK_CLICKED)}
+      >
+        <Mail size={14} aria-hidden="true" />
+        <span>Markus F.J. Busche</span>
+      </a>
+      <span className="app-version-footer__sep" aria-hidden="true">
+        ·
+      </span>
       <a
         className="kofi-footer-badge"
         href={KOFI_URL}