till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 20:41:09 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refactor(shared-ui): fold Cloud Sync pill into the user menu bar

Browse source 
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>
This commit is contained in:
Till JS 2026-04-15 19:11:47 +02:00
parent fdb8e60d07
commit 901d450416
1 changed files with 15 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

39
packages/shared-ui/src/navigation/PillNavigation.svelte
View file

@ -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}