From 5d4bf201fd1f19700a4dca6476a3f557c4e05170 Mon Sep 17 00:00:00 2001 From: Till JS Date: Wed, 15 Apr 2026 01:25:18 +0200 Subject: [PATCH] refactor(shared-ui): migrate PillNav nav items to shared Pill component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PillNavigation rendered three near-identical inline pill blocks (prepended elements, main nav items, appended elements). Consolidate onto the Pill component so the visual base stays in lockstep with the bottom-stack bars. - Extend Pill with size='sm'|'md'. sm = 36px with 18px icons (PillNav style); md = 44px with 20px icons (bar pills, default). - Move the icon-only padding override into Pill itself. - Extract the Mana-Logo SVG (duplicated inline) to ManaLogoIcon.svelte. - Replace the three inline pill loops in PillNavigation with . Mana-logo and iconSvg cases ride the `leading` snippet. onClick vs href disambiguation is collapsed into a single Pill call per item. - Remove the now-unreachable .pill-icon scoped CSS that was only meaningful for the removed inline SVGs (Phosphor icon sizing comes from the size prop). Net: ~70 lines removed from PillNavigation.svelte without changing the render output. Bar-mode triggers (sync / ai / theme / user) still render inline because their logic is too entangled with activeBarId — leave for a follow-up. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../src/navigation/ManaLogoIcon.svelte | 21 +++ packages/shared-ui/src/navigation/Pill.svelte | 41 +++++- .../src/navigation/PillNavigation.svelte | 120 +++++------------- packages/shared-ui/src/navigation/index.ts | 1 + 4 files changed, 94 insertions(+), 89 deletions(-) create mode 100644 packages/shared-ui/src/navigation/ManaLogoIcon.svelte diff --git a/packages/shared-ui/src/navigation/ManaLogoIcon.svelte b/packages/shared-ui/src/navigation/ManaLogoIcon.svelte new file mode 100644 index 000000000..925f5d7b8 --- /dev/null +++ b/packages/shared-ui/src/navigation/ManaLogoIcon.svelte @@ -0,0 +1,21 @@ + + + diff --git a/packages/shared-ui/src/navigation/Pill.svelte b/packages/shared-ui/src/navigation/Pill.svelte index 4455be31b..e26d4d2ca 100644 --- a/packages/shared-ui/src/navigation/Pill.svelte +++ b/packages/shared-ui/src/navigation/Pill.svelte @@ -11,6 +11,8 @@ label?: string; /** Hide label (label is still used for aria-label/title). */ iconOnly?: boolean; + /** Height preset. 'sm' = 36px (PillNav), 'md' = 44px (bar pills). */ + size?: 'sm' | 'md'; /** Active/selected state */ active?: boolean; /** Primary accent (e.g. "Erstellen") */ @@ -38,6 +40,7 @@ href, label, iconOnly = false, + size = 'md', active = false, primary = false, danger = false, @@ -51,6 +54,7 @@ }: Props = $props(); const IconComp = $derived(icon ? phosphorIcons[icon] : null); + const iconPx = $derived(size === 'sm' ? 18 : 20); const ariaLabel = $derived(iconOnly ? label : undefined); const effectiveTitle = $derived(title ?? (iconOnly ? label : undefined)); @@ -58,7 +62,7 @@ {#snippet body()} {#if leading}{@render leading()}{/if} {#if IconComp} - + {/if} {#if label && !iconOnly} {label} @@ -69,7 +73,15 @@ {#if href} {:else if isNavItem(element)} - - {#if element.icon} - {#if phosphorIcons[element.icon]} - {@const IconComponent = phosphorIcons[element.icon]} - - {/if} - {/if} - {element.label} - + {/if} {/each} {#each items as item} - {#if item.onClick} - - {:else} - - {#if item.icon} - {#if item.icon === 'mana'} - - - - {:else if item.iconSvg} - {@html item.iconSvg} - {:else if phosphorIcons[item.icon]} - {@const IconComponent = phosphorIcons[item.icon]} - - {/if} - {/if} - {#if !item.iconOnly} - {item.label} - {/if} - - {/if} + {/snippet} + {/each} @@ -757,15 +720,13 @@ direction={dropdownDirection} /> {:else if isNavItem(element)} - - {#if element.icon} - {#if phosphorIcons[element.icon]} - {@const IconComponent = phosphorIcons[element.icon]} - - {/if} - {/if} - {element.label} - + {/if} {/each} @@ -944,11 +905,6 @@ min-height: 44px; justify-content: center; } - - .pill-icon { - width: 1.5rem; - height: 1.5rem; - } } /* Base pill styles */ @@ -1037,12 +993,6 @@ border-color: rgba(220, 38, 38, 0.3); } - .pill-icon { - width: 1.25rem; - height: 1.25rem; - flex-shrink: 0; - } - .pill-label { display: inline; } diff --git a/packages/shared-ui/src/navigation/index.ts b/packages/shared-ui/src/navigation/index.ts index 968f7f56f..a3231b7cb 100644 --- a/packages/shared-ui/src/navigation/index.ts +++ b/packages/shared-ui/src/navigation/index.ts @@ -3,6 +3,7 @@ export { default as Navbar } from './Navbar.svelte'; export { default as Sidebar } from './Sidebar.svelte'; export { default as SidebarSection } from './SidebarSection.svelte'; export { default as Pill } from './Pill.svelte'; +export { default as ManaLogoIcon } from './ManaLogoIcon.svelte'; export { default as PillNavigation } from './PillNavigation.svelte'; export { default as PillDropdown } from './PillDropdown.svelte'; export { default as PillDropdownBar } from './PillDropdownBar.svelte';