From 272c4918b061e20542a13e9fbcf539518bdc9e00 Mon Sep 17 00:00:00 2001
From: kristianwind <kristianwind@gmail.com>
Date: Thu, 27 Aug 2026 14:49:24 +0200
Subject: [PATCH] feat(settings): a quiet Buy me a coffee link
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A donate link belongs in Settings and nowhere in the way — so it sits last,
understated, below the device list. A plain anchor with an inline SVG cup:
no third-party script, no webfont, no tracking, so it works offline and
cannot phone home. Wording says the app is MIT with nothing held back and
that nothing changes if you don't pay.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/src/lib/locales/da.js                 |  4 ++
 web/src/lib/locales/en.js                 |  4 ++
 web/src/routes/indstillinger/+page.svelte | 68 +++++++++++++++++++++++
 3 files changed, 76 insertions(+)

diff --git a/web/src/lib/locales/da.js b/web/src/lib/locales/da.js
index a15519d..9e7a17d 100644
--- a/web/src/lib/locales/da.js
+++ b/web/src/lib/locales/da.js
@@ -266,6 +266,10 @@ export const da = {
 		'Hvor du er logget ind. Genkender du ikke en af dem, så log den ud og skift adgangskode.',
 	'account.thisDevice': 'denne enhed',
 	'account.signOutDevice': 'Log ud',
+	'account.support': 'Støt projektet',
+	'account.supportHint':
+		'verdande er fri, open source-software under MIT-licensen — ingen betalt version, intet holdt tilbage. Sparede den dig en eftermiddag, kan du give vedligeholderen en kop kaffe. Helt frivilligt, og intet i appen ændrer sig.',
+	'account.buyCoffee': 'Buy me a coffee',
 
 	'account.totpEnabled': 'Slået til.',
 	'account.recoveryLeftOne': '{n} gendannelseskode tilbage.',
diff --git a/web/src/lib/locales/en.js b/web/src/lib/locales/en.js
index d04aea9..f6435f4 100644
--- a/web/src/lib/locales/en.js
+++ b/web/src/lib/locales/en.js
@@ -262,6 +262,10 @@ export const en = {
 		'Where you are signed in. If you do not recognise one, sign it out and change your password.',
 	'account.thisDevice': 'this device',
 	'account.signOutDevice': 'Sign out',
+	'account.support': 'Support the project',
+	'account.supportHint':
+		'verdande is free, open-source software under the MIT licence — no paid tier, nothing held back. If it saved you an afternoon, you can buy the maintainer a coffee. Entirely optional, and nothing in the app changes either way.',
+	'account.buyCoffee': 'Buy me a coffee',
 
 	'account.totpEnabled': 'On.',
 	'account.recoveryLeftOne': '{n} recovery code left.',
diff --git a/web/src/routes/indstillinger/+page.svelte b/web/src/routes/indstillinger/+page.svelte
index cfda6ce..2537b97 100644
--- a/web/src/routes/indstillinger/+page.svelte
+++ b/web/src/routes/indstillinger/+page.svelte
@@ -571,6 +571,42 @@
 	</ul>
 </section>
 
+<!-- Last, and quietly: a donate link belongs in Settings, never in the way of the
+     work. A plain anchor with an inline SVG — no third-party script, no webfont,
+     no tracking — so it works offline and cannot phone home. See the coffee-cup
+     snippet for why not their generated button. -->
+<section class="panel">
+	<header>
+		<h2>{t('account.support')}</h2>
+		<p class="hint">{t('account.supportHint')}</p>
+	</header>
+
+	<a
+		class="bmc"
+		href="https://buymeacoffee.com/kristianwind"
+		target="_blank"
+		rel="noopener noreferrer"
+	>
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="1.8"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			aria-hidden="true"
+			focusable="false"
+		>
+			<path d="M4 9h13v6a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V9Z" />
+			<path d="M17 10h1.5a2.5 2.5 0 0 1 0 5H17" />
+			<path d="M7.5 5.6c0-.9.8-1.1.8-2M11 5.6c0-.9.8-1.1.8-2M14.5 5.6c0-.9.8-1.1.8-2" />
+		</svg>
+		{t('account.buyCoffee')} ↗
+	</a>
+</section>
+
 <style>
 	.looks {
 		margin-top: var(--s4);
@@ -771,4 +807,36 @@
 	.uri {
 		overflow-wrap: anywhere;
 	}
+
+	/* The understated variant: present, not loud. Bordered and in the muted ink so
+	   it reads as a footnote, brightening on hover. The cup is outline-only. */
+	.bmc {
+		align-self: flex-start;
+		display: inline-flex;
+		align-items: center;
+		gap: var(--s2);
+		padding: var(--s2) var(--s3);
+		border: 1px solid var(--line-strong);
+		border-radius: var(--radius);
+		color: var(--ink-muted);
+		text-decoration: none;
+		font-size: var(--text-sm);
+		transition:
+			color var(--fast) var(--ease),
+			border-color var(--fast) var(--ease);
+	}
+
+	.bmc:hover {
+		color: var(--ink);
+		border-color: var(--ink-muted);
+	}
+
+	.bmc:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+
+	.bmc svg {
+		flex: none;
+	}
 </style>