From 7bc3c25ba4105b2ea9b0006f2ba67808215bdda8 Mon Sep 17 00:00:00 2001 From: elpatron Date: Wed, 3 Jun 2026 15:33:56 +0200 Subject: [PATCH] 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 --- client/src/App.css | 21 +++++++++++++++++++++ client/src/components/AppFooter.tsx | 20 ++++++++++++++++++++ client/src/i18n/locales/da.json | 4 ++++ client/src/i18n/locales/de.json | 4 ++++ client/src/i18n/locales/en.json | 4 ++++ client/src/i18n/locales/nb.json | 4 ++++ client/src/i18n/locales/sv.json | 4 ++++ client/src/services/analytics.ts | 1 + docs/plausible-events.md | 1 + 9 files changed, 63 insertions(+) diff --git a/client/src/App.css b/client/src/App.css index 0abf40e..8859b40 100644 --- a/client/src/App.css +++ b/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; diff --git a/client/src/components/AppFooter.tsx b/client/src/components/AppFooter.tsx index d90fea4..46b35f4 100644 --- a/client/src/components/AppFooter.tsx +++ b/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 ( ) } diff --git a/client/src/i18n/locales/da.json b/client/src/i18n/locales/da.json index cf0aeb4..4cb50db 100644 --- a/client/src/i18n/locales/da.json +++ b/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", diff --git a/client/src/i18n/locales/de.json b/client/src/i18n/locales/de.json index efe0ba6..ea5b5f2 100644 --- a/client/src/i18n/locales/de.json +++ b/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", diff --git a/client/src/i18n/locales/en.json b/client/src/i18n/locales/en.json index 2a92995..4d2982a 100644 --- a/client/src/i18n/locales/en.json +++ b/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", diff --git a/client/src/i18n/locales/nb.json b/client/src/i18n/locales/nb.json index e66add3..08d9f4f 100644 --- a/client/src/i18n/locales/nb.json +++ b/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", diff --git a/client/src/i18n/locales/sv.json b/client/src/i18n/locales/sv.json index 1271762..b5b781e 100644 --- a/client/src/i18n/locales/sv.json +++ b/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", diff --git a/client/src/services/analytics.ts b/client/src/services/analytics.ts index bece555..45ed391 100644 --- a/client/src/services/analytics.ts +++ b/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', diff --git a/docs/plausible-events.md b/docs/plausible-events.md index 6a6caa1..c547ccd 100644 --- a/docs/plausible-events.md +++ b/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`) | — |