From f7835471f48675e4b282ea13ceffc4e6d533c0ac Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Sat, 11 Apr 2026 15:56:00 +0200
Subject: [PATCH] feat(workbench): match AppPagePicker design to module pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Bump PickerOverlay border-radius from 0.375rem to 1.25rem to match
  PageShell — picker now visually aligns with the page cards next to it
- Replace colored dots in AppPagePicker with monochrome app icons
  (uses each app's icon component from the registry, currentColor)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/lib/components/PickerOverlay.svelte   |  7 ++---
 .../components/workbench/AppPagePicker.svelte | 26 ++++++++++++-------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/apps/mana/apps/web/src/lib/components/PickerOverlay.svelte b/apps/mana/apps/web/src/lib/components/PickerOverlay.svelte
index f0c306f85..b33f0d620 100644
--- a/apps/mana/apps/web/src/lib/components/PickerOverlay.svelte
+++ b/apps/mana/apps/web/src/lib/components/PickerOverlay.svelte
@@ -75,13 +75,14 @@
 		min-height: 60vh;
 		max-height: 80vh;
 		background: hsl(var(--color-card));
-		border-radius: 0.375rem;
+		border-radius: 1.25rem;
 		box-shadow:
-			0 2px 8px rgba(0, 0, 0, 0.08),
-			0 0 0 1px rgba(0, 0, 0, 0.04);
+			0 2px 8px hsl(0 0% 0% / 0.08),
+			0 0 0 1px hsl(var(--color-border));
 		display: flex;
 		flex-direction: column;
 		animation: slideIn 0.25s ease-out;
+		overflow: hidden;
 	}
 	@keyframes slideIn {
 		from {
diff --git a/apps/mana/apps/web/src/lib/components/workbench/AppPagePicker.svelte b/apps/mana/apps/web/src/lib/components/workbench/AppPagePicker.svelte
index a22e7d4fb..110f97750 100644
--- a/apps/mana/apps/web/src/lib/components/workbench/AppPagePicker.svelte
+++ b/apps/mana/apps/web/src/lib/components/workbench/AppPagePicker.svelte
@@ -78,7 +78,12 @@
 	{/snippet}
 	{#snippet item(app)}
 		<button class="picker-option" onclick={() => onSelect(app.id)}>
-			<div class="app-dot" style="background-color: {app.color}"></div>
+			<div class="app-icon-wrap">
+				{#if app.icon}
+					{@const Icon = app.icon}
+					<Icon size={18} />
+				{/if}
+			</div>
 			<span class="app-name">{appName(app.id, app.name)}</span>
 		</button>
 	{/snippet}
@@ -111,18 +116,21 @@
 		color: hsl(var(--color-muted-foreground));
 	}
 
-	:global(.picker .app-dot) {
-		width: 10px;
-		height: 10px;
-		border-radius: 9999px;
+	:global(.picker .app-icon-wrap) {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 22px;
+		height: 22px;
 		flex-shrink: 0;
+		color: hsl(var(--color-muted-foreground));
+	}
+	:global(.picker .picker-option:hover .app-icon-wrap) {
+		color: hsl(var(--color-foreground));
 	}
 	:global(.picker .app-name) {
 		font-size: 0.875rem;
 		font-weight: 500;
-		color: #374151;
-	}
-	:global(.dark .picker .app-name) {
-		color: #f3f4f6;
+		color: hsl(var(--color-foreground));
 	}
 </style>