From 39c85ccdcc2929abb5d047a183ec737aaa5b81ac Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Wed, 15 Apr 2026 15:31:53 +0200
Subject: [PATCH] feat(shared-ui): add "Anmelden" entry to the guest user-menu
 bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the right-hand user pill is clicked as a guest (barMode), the
opening bar used to show just a decorative "Menü" label pill on
the left and then settings + theme toggles — none of which are a
useful first action for someone not logged in.

- phosphor-icon-map: register SignIn as `login`, so PillDropdownBar
  can render it the same way as the existing `logout` glyph.
- PillNavigation.userMenuBarItems: prepend an "Anmelden" item for
  guests (no userEmail + loginHref given) that navigates to
  loginHref. It becomes the first CTA in the bar, above settings /
  theme / language.
- PillNavigation.userBarConfig: drop the bar-header label when the
  viewer is a guest. The decorative "Menü" pill added nothing
  alongside the new Anmelden action and just cluttered the leading
  edge of the bar.

The popover variant of the user menu (UserMenuPanel) already had
its own guest login button — this mirrors that behaviour for the
bottom-bar variant used on mobile / narrow layouts.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/navigation/PillNavigation.svelte      | 22 +++++++++++++++++--
 .../src/navigation/phosphor-icon-map.ts       |  2 ++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/shared-ui/src/navigation/PillNavigation.svelte b/packages/shared-ui/src/navigation/PillNavigation.svelte
index 3f0e4894a..b96d19788 100644
--- a/packages/shared-ui/src/navigation/PillNavigation.svelte
+++ b/packages/shared-ui/src/navigation/PillNavigation.svelte
@@ -552,6 +552,20 @@
 	// light/dark/system toggle, theme button.
 	const userMenuBarItems = $derived.by<PillDropdownItem[]>(() => {
 		const out: PillDropdownItem[] = [];
+		// Guest → put "Anmelden" first. Everything else in the menu
+		// (settings, theme, logout) is a user-only action or a trivial
+		// toggle, so the login entry should be the obvious call-to-action
+		// at the top of the bar.
+		if (!userEmail && loginHref) {
+			out.push({
+				id: 'login',
+				label: 'Anmelden',
+				icon: 'login',
+				onClick: () => {
+					window.location.href = loginHref;
+				},
+			});
+		}
 		if (settingsHref) {
 			out.push({
 				id: 'settings',
@@ -758,10 +772,14 @@
 			<!-- User Menu -->
 			{#if (userEmail || loginHref) && barMode}
 				{@const userLabel = userEmail ? truncateEmail(userEmail) : guestMenuLabel}
+				<!-- For guests we omit the bar header label: the first item in
+					 userMenuBarItems is the "Anmelden" call-to-action, and a
+					 decorative "Menü" pill sitting to its left just clutters
+					 the bar without adding information. -->
 				{@const userBarConfig = {
 					id: 'user',
-					label: userLabel,
-					icon: 'user',
+					label: userEmail ? userLabel : '',
+					icon: userEmail ? 'user' : undefined,
 					items: userMenuBarItems,
 				}}
 				<Pill
diff --git a/packages/shared-ui/src/navigation/phosphor-icon-map.ts b/packages/shared-ui/src/navigation/phosphor-icon-map.ts
index f4acb44d4..b5d7613ff 100644
--- a/packages/shared-ui/src/navigation/phosphor-icon-map.ts
+++ b/packages/shared-ui/src/navigation/phosphor-icon-map.ts
@@ -40,6 +40,7 @@ import {
 	ShareFat,
 	ShareNetwork,
 	Shield,
+	SignIn,
 	SignOut,
 	Sparkle,
 	Spiral,
@@ -95,6 +96,7 @@ export const phosphorIcons: Record<string, any> = {
 	compass: Compass,
 	moon: Moon,
 	sun: Sun,
+	login: SignIn,
 	logout: SignOut,
 	chevronDown: CaretDown,
 	menu: List,