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

feat(page-carousel): empty-state message when scene has no apps

Browse source 
When the scene has zero apps the carousel used to show just a
small "+ Hinzufügen" button centered in 60vh of whitespace —
visually underpowered and easy to miss on mobile. Replace with a
proper empty state:

- Heading: "Diese Szene ist leer"
- Hint line: "Füge eine App hinzu, um loszulegen — oder drücke [0]"
- The existing add-card button sits underneath

The kbd chip styles match the layout's typical keyboard hint
pattern and quietly teach the '0' shortcut that already opens
the picker (registered at +page.svelte keybind handler).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-15 21:34:39 +02:00
parent db959b6f8f
commit 32f4c0d10d
1 changed files with 41 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

44
apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte
View file

@ -131,9 +131,15 @@
{#if showPicker && picker}
{@render picker()}
{:else}
<button class="add-card alone" onclick={onTogglePicker}>
<Plus size={24} /><span class="add-label">{addLabel}</span>
</button>
<div class="empty-state">
<p class="empty-title">Diese Szene ist leer</p>
<p class="empty-hint">
Füge eine App hinzu, um loszulegen — oder drücke <kbd>0</kbd>.
</p>
<button class="add-card alone" onclick={onTogglePicker}>
<Plus size={24} /><span class="add-label">{addLabel}</span>
</button>
</div>
{/if}
</div>
{:else if showPicker && picker}
@ -212,6 +218,38 @@
justify-content: center;
min-height: 60vh;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
max-width: 100%;
}
.empty-title {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
color: hsl(var(--color-foreground));
}
.empty-hint {
margin: 0 0 1rem;
font-size: 0.875rem;
color: hsl(var(--color-muted-foreground));
text-align: center;
line-height: 1.5;
}
.empty-hint kbd {
display: inline-block;
padding: 0.0625rem 0.375rem;
border: 1px solid hsl(var(--color-border));
border-bottom-width: 2px;
border-radius: 0.25rem;
background: hsl(var(--color-surface, var(--color-muted)));
font-family:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
font-size: 0.75rem;
color: hsl(var(--color-foreground));
}
.add-card.alone {
width: 100%;
min-height: 60vh;