From 32f4c0d10deb661a96c724e170d0a8607e768d45 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Wed, 15 Apr 2026 21:34:39 +0200
Subject: [PATCH] feat(page-carousel): empty-state message when scene has no
 apps
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../page-carousel/PageCarousel.svelte         | 44 +++++++++++++++++--
 1 file changed, 41 insertions(+), 3 deletions(-)

diff --git a/apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte b/apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte
index 5a399829a..b5e5c4b36 100644
--- a/apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte
+++ b/apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte
@@ -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;