fix(mana,ui): integrate guest nudge into bottom stack + theme it

The "Gefällt es dir?" guest nudge was a free-floating fixed element at
bottom: 10rem, so it didn't follow the bottom-stack when the PillNav was
collapsed. Move it inside .bottom-stack as the first child so it shares
the stack's reflow.

NotificationBar now uses the elevation system (--color-surface-elevated,
--color-border-strong, --color-foreground) instead of hardcoded rgba so
it adapts to all themes. Bumped the CTA button (shadow + hover lift) and
container (stronger border, layered shadow) to be more visible.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-08 12:13:05 +02:00
parent b3523f8bdc
commit c8ed58b7d1
2 changed files with 47 additions and 35 deletions

View file

@ -432,6 +432,13 @@
<div class="min-h-screen bg-background">
<!-- Bottom Stack: all fixed-bottom elements in one flex container -->
<div class="bottom-stack" style:--bottom-chrome-height="{bottomChromeHeight}px">
<!-- Guest nudge — sits above the input bar, fades with the stack -->
{#if guestMode && guestMode.notifications.length > 0}
<div class="bottom-stack-notification">
<NotificationBar notifications={guestMode.notifications} />
</div>
{/if}
<!-- QuickInputBar with inline nav toggle -->
<QuickInputBar
onSearch={inputBarAdapter.onSearch}
@ -536,13 +543,6 @@
<!-- Keyboard shortcuts modal -->
<KeyboardShortcutsModal open={showShortcuts} onclose={() => (showShortcuts = false)} />
<!-- Guest notifications (nudge) -->
{#if guestMode && guestMode.notifications.length > 0}
<div class="notification-float">
<NotificationBar notifications={guestMode.notifications} />
</div>
{/if}
</div>
<!-- Navigation Context Menu -->
@ -618,12 +618,9 @@
transform: rotate(180deg);
}
.notification-float {
position: fixed;
bottom: 10rem;
left: 50%;
transform: translateX(-50%);
z-index: 100;
pointer-events: auto;
.bottom-stack-notification {
display: flex;
justify-content: center;
padding: 0 1rem 0.5rem;
}
</style>