feat(workbench): match AppPagePicker design to module pages

- 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>
This commit is contained in:
Till JS 2026-04-11 15:56:00 +02:00
parent f7de9fdf2d
commit f7835471f4
2 changed files with 21 additions and 12 deletions

View file

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

View file

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