From b8e5155e2d50295ac2090f09791a6bc08c7d3417 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Thu, 23 Apr 2026 16:00:05 +0200
Subject: [PATCH] style(header): replace Login text with lucide icon

Logged-out users now see a LogIn icon in the header nav pill instead
of the "Login" text link. Avatar button still shown when logged in.
---
 package.json                         |  2 +-
 src/lib/components/UserHeader.svelte | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 30acc1d0..91c888d4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "homepage",
-	"version": "1.46.26",
+	"version": "1.46.27",
 	"private": true,
 	"type": "module",
 	"scripts": {
diff --git a/src/lib/components/UserHeader.svelte b/src/lib/components/UserHeader.svelte
index e4113c60..018c9c6f 100644
--- a/src/lib/components/UserHeader.svelte
+++ b/src/lib/components/UserHeader.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import { page } from '$app/stores';
+	import LogIn from '@lucide/svelte/icons/log-in';
 
 	let { user, recipeLang = 'rezepte', lang = 'de' } = $props();
 
@@ -56,6 +57,12 @@
 		background-size: contain;
 		cursor: pointer;
 	}
+	.login-link {
+		display: flex !important;
+		align-items: center;
+		justify-content: center;
+		padding: 0.4rem !important;
+	}
 	.options-wrap {
 		--menu-bg: rgba(46, 52, 64, 0.95);
 		--menu-border: rgba(255,255,255,0.08);
@@ -155,5 +162,12 @@
 	</div>
 	</button>
 {:else}
-	<a class=entry href="/login?callbackUrl={encodeURIComponent($page.url.pathname + $page.url.search)}">Login</a>
+	<a
+		class="entry login-link"
+		href="/login?callbackUrl={encodeURIComponent($page.url.pathname + $page.url.search)}"
+		aria-label={lang === 'de' ? 'Anmelden' : 'Login'}
+		title={lang === 'de' ? 'Anmelden' : 'Login'}
+	>
+		<LogIn size={18} />
+	</a>
 {/if}