till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-27 23:37:42 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(workbench): match AppPagePicker design to module pages

Browse source 
- 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
Download patch file Download diff file Expand all files Collapse all files

7
apps/mana/apps/web/src/lib/components/PickerOverlay.svelte
View file

@ -75,13 +75,14 @@
min-height: 60vh; min-height: 60vh;
max-height: 80vh; max-height: 80vh;
background: hsl(var(--color-card)); background: hsl(var(--color-card));
border-radius: 0.375rem; border-radius: 1.25rem;
box-shadow: box-shadow:
0 2px 8px rgba(0, 0, 0, 0.08), 0 2px 8px hsl(0 0% 0% / 0.08),
0 0 0 1px rgba(0, 0, 0, 0.04); 0 0 0 1px hsl(var(--color-border));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
animation: slideIn 0.25s ease-out; animation: slideIn 0.25s ease-out;
overflow: hidden;
} }
@keyframes slideIn { @keyframes slideIn {
from { from {

26
apps/mana/apps/web/src/lib/components/workbench/AppPagePicker.svelte
View file

@ -78,7 +78,12 @@
{/snippet} {/snippet}
{#snippet item(app)} {#snippet item(app)}
<button class="picker-option" onclick={() => onSelect(app.id)}> <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> <span class="app-name">{appName(app.id, app.name)}</span>
</button> </button>
{/snippet} {/snippet}
@ -111,18 +116,21 @@
color: hsl(var(--color-muted-foreground)); color: hsl(var(--color-muted-foreground));
} }
:global(.picker .app-dot) { :global(.picker .app-icon-wrap) {
width: 10px; display: flex;
height: 10px; align-items: center;
border-radius: 9999px; justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0; 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) { :global(.picker .app-name) {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
color: #374151; color: hsl(var(--color-foreground));
}
:global(.dark .picker .app-name) {
color: #f3f4f6;
} }
</style> </style>