feat: add discreet Ko-fi support badge in app footer

Let users support project development and running costs via ko-fi.com/kapteinsdaagbok, with i18n tooltips and Plausible tracking.

Co-authored-by: Cursor <cursoragent@cursor.com>

client/src/App.css

@@ -5472,6 +5472,27 @@ html.theme-cupertino .events-scroll-container {
   text-decoration: underline;
 }
 
+.kofi-footer-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 500;
+  color: #94a3b8;
+  text-decoration: none;
+  background: rgba(255, 94, 91, 0.08);
+  border: 1px solid rgba(255, 94, 91, 0.18);
+  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+}
+
+.kofi-footer-badge:hover {
+  color: #fecaca;
+  background: rgba(255, 94, 91, 0.14);
+  border-color: rgba(255, 94, 91, 0.32);
+}
+
 .demo-badge {
   display: inline-flex;
   align-items: center;

client/src/components/AppFooter.tsx

@@ -1,8 +1,13 @@
+import { Coffee } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
 
 const APP_VERSION = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : 'dev'
+const KOFI_URL = 'https://ko-fi.com/kapteinsdaagbok'
 
 export default function AppFooter() {
+  const { t } = useTranslation()
+
   return (
     <footer className="app-version-footer">
       <span className="app-version-footer__version">v{APP_VERSION}</span>
@@ -18,6 +23,21 @@ export default function AppFooter() {
           Markus F.J. Busche
         </a>
       </span>
+      <span className="app-version-footer__sep" aria-hidden="true">
+        ·
+      </span>
+      <a
+        className="kofi-footer-badge"
+        href={KOFI_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        title={t('footer.kofi_title')}
+        aria-label={t('footer.kofi_title')}
+        onClick={() => trackPlausibleEvent(PlausibleEvents.KOFI_LINK_CLICKED)}
+      >
+        <Coffee size={12} aria-hidden="true" />
+        <span>{t('footer.kofi_label')}</span>
+      </a>
     </footer>
   )
 }

client/src/i18n/locales/da.json

@@ -6,6 +6,10 @@
       "beta": "Beta",
       "beta_hint": "Betaversion - funktioner kan stadig ændres"
     },
+    "footer": {
+      "kofi_label": "Ko-fi",
+      "kofi_title": "Støt projektet, videreudvikling og driftsomkostninger på Ko-fi"
+    },
     "languages": {
       "de": "Deutsch",
       "en": "English",

client/src/i18n/locales/de.json

@@ -6,6 +6,10 @@
       "beta": "Beta",
       "beta_hint": "Beta-Version — Funktionen können sich noch ändern"
     },
+    "footer": {
+      "kofi_label": "Ko-fi",
+      "kofi_title": "Projekt, Weiterentwicklung und Betriebskosten auf Ko-fi unterstützen"
+    },
     "languages": {
       "de": "Deutsch",
       "en": "English",

client/src/i18n/locales/en.json

@@ -6,6 +6,10 @@
       "beta": "Beta",
       "beta_hint": "Beta release — features may still change"
     },
+    "footer": {
+      "kofi_label": "Ko-fi",
+      "kofi_title": "Support the project, development, and running costs on Ko-fi"
+    },
     "languages": {
       "de": "Deutsch",
       "en": "English",

client/src/i18n/locales/nb.json

@@ -6,6 +6,10 @@
       "beta": "Beta",
       "beta_hint": "Betaversjon - funksjoner kan fortsatt endres"
     },
+    "footer": {
+      "kofi_label": "Ko-fi",
+      "kofi_title": "Støtt prosjektet, videreutvikling og driftskostnader på Ko-fi"
+    },
     "languages": {
       "de": "Deutsch",
       "en": "English",

client/src/i18n/locales/sv.json

@@ -6,6 +6,10 @@
       "beta": "Beta",
       "beta_hint": "Betaversion - funktioner kan fortfarande ändras"
     },
+    "footer": {
+      "kofi_label": "Ko-fi",
+      "kofi_title": "Stöd projektet, vidareutveckling och driftskostnader på Ko-fi"
+    },
     "languages": {
       "de": "Deutsch",
       "en": "English",

client/src/services/analytics.ts

@@ -26,6 +26,7 @@ export const PlausibleEvents = {
   PUSH_ENABLED: 'Push Enabled',
   PUSH_DISABLED: 'Push Disabled',
   FOOTER_LINK_CLICKED: 'Footer Link Clicked',
+  KOFI_LINK_CLICKED: 'Ko-fi Link Clicked',
   PROFILE_OPENED: 'Profile Opened',
   PASSKEY_ADDED: 'Passkey Added',
   PASSKEY_REMOVED: 'Passkey Removed',

docs/plausible-events.md

@@ -47,6 +47,7 @@ Kapteins Daagbok nutzt [Plausible Analytics](https://plausible.io/) mit dem Scri
 | Push Enabled | Crew-Änderungs-Push aktiviert (`PushNotificationSettings.tsx`) | — |
 | Push Disabled | Crew-Änderungs-Push deaktiviert (`PushNotificationSettings.tsx`) | — |
 | Footer Link Clicked | Klick auf Autoren-Link im App-Footer (`AppFooter.tsx`) | — |
+| Ko-fi Link Clicked | Klick auf Ko-fi-Unterstützen-Badge im App-Footer (`AppFooter.tsx`) | — |
 | Profile Opened | Profilseite geöffnet (`UserProfilePage.tsx`, einmal pro Mount) | — |
 | Passkey Added | Passkey erfolgreich registriert (`UserProfilePage.tsx`) | `labeled`: `true` \| `false` (optionaler Name gesetzt) |
 | Passkey Removed | Passkey entfernt, mindestens ein Key verbleibt (`UserProfilePage.tsx`) | — |