From 901d450416e9389c7b458318f6090c30a3fefe20 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Wed, 15 Apr 2026 19:11:47 +0200
Subject: [PATCH] refactor(shared-ui): fold Cloud Sync pill into the user menu
 bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The standalone "Cloud Sync" pill sat fifth in the bar-mode pill row
on mobile / narrow layouts, pushing the pill row to 5+ items and
duplicating actions the user menu already surfaces (Sync-Einstellungen,
credits link). Move the sync status + actions into userMenuBarItems
so they appear as a labelled section inside the bar that opens when
the user pill is tapped.

Render order for signed-in users now goes:
  account · settings · theme-mode · theme · [Sync section] · logout

The section header uses the existing `divider: true, label: 'Sync'`
shape PillDropdownBar already understands, so the status line ("Cloud
Sync aktiv", etc.) sits under a real heading. For guests the section
is skipped entirely — sync doesn't apply before login.

Left the non-barMode popover path alone (showSyncStatus + syncStatusItems
still drive the inline PillDropdown when a popover is in use) since
the complaint was specifically about the bar's fifth pill on mobile.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/navigation/PillNavigation.svelte      | 39 +++++++------------
 1 file changed, 15 insertions(+), 24 deletions(-)

diff --git a/packages/shared-ui/src/navigation/PillNavigation.svelte b/packages/shared-ui/src/navigation/PillNavigation.svelte
index b96d19788..ba5428139 100644
--- a/packages/shared-ui/src/navigation/PillNavigation.svelte
+++ b/packages/shared-ui/src/navigation/PillNavigation.svelte
@@ -614,6 +614,15 @@
 				},
 			});
 		}
+		// Cloud Sync — only for signed-in users. Folded into the user menu
+		// so the top-level pill row stays short; the status line itself
+		// (e.g. "Cloud Sync aktiv") is disabled and renders as a section
+		// header because PillDropdownBar shows `divider: true, label` as a
+		// labelled separator.
+		if (userEmail && showSyncStatus && syncStatusItems.length > 0) {
+			out.push({ id: 'sync-section', label: 'Sync', divider: true });
+			for (const item of syncStatusItems) out.push(item);
+		}
 		if (onLogout && showLogout && userEmail) {
 			out.push({
 				id: 'logout',
@@ -744,30 +753,12 @@
 				{/if}
 			{/each}
 
-			<!-- Sync Status -->
-			{#if showSyncStatus && syncStatusItems.length > 0 && barMode}
-				{@const syncConfig = {
-					id: 'sync',
-					label: currentSyncLabel,
-					icon: 'cloud',
-					items: syncStatusItems,
-				}}
-				<Pill
-					size="sm"
-					icon="cloud"
-					label={currentSyncLabel}
-					active={activeBarId === 'sync'}
-					onclick={() => toggleBar(syncConfig)}
-					title={currentSyncLabel}
-				/>
-			{:else if showSyncStatus && syncStatusItems.length > 0}
-				<PillDropdown
-					items={syncStatusItems}
-					direction={dropdownDirection}
-					label={currentSyncLabel}
-					icon="cloud"
-				/>
-			{/if}
+			<!-- Sync status lives inside the user menu now (see
+				 userMenuBarItems). We used to render a standalone cloud pill
+				 here but it pushed the nav to 5+ pills on mobile while
+				 duplicating items the user menu panel already shows for
+				 settings / account. Folding into the user menu keeps the
+				 top-level row short and gives sync a real section header. -->
 
 			<!-- User Menu -->
 			{#if (userEmail || loginHref) && barMode}