mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 22:01:09 +02:00
refactor(shared-ui): migrate PillNav nav items to shared Pill component
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 <Pill size='sm'>. 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) <noreply@anthropic.com>
This commit is contained in:
Till JS
parent
a047f6cb7c
commit
5d4bf201fd
4 changed files with 94 additions and 89 deletions
21
packages/shared-ui/src/navigation/ManaLogoIcon.svelte
Normal file
21
packages/shared-ui/src/navigation/ManaLogoIcon.svelte
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<script lang="ts">
|
||||
interface Props {
|
||||
size?: number;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
let { size = 24, class: className = '' }: Props = $props();
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class={className}
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
width={size}
|
||||
height={size}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M12.3047 1C12.3392 1.04573 19.608 10.6706 19.6084 14.6953C19.6084 18.7293 16.3386 21.9998 12.3047 22C8.27061 22 5 18.7294 5 14.6953C5.00041 10.661 12.3047 1 12.3047 1ZM12.3047 7.3916C12.2811 7.42276 8.65234 12.2288 8.65234 14.2393C8.65241 16.2562 10.2877 17.8916 12.3047 17.8916C14.3217 17.8916 15.957 16.2562 15.957 14.2393C15.957 12.2301 12.3331 7.42917 12.3047 7.3916Z"
|
||||
/>
|
||||
</svg>
|
||||
|
|
@ -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));
|
||||
</script>
|
||||
|
|
@ -58,7 +62,7 @@
|
|||
{#snippet body()}
|
||||
{#if leading}{@render leading()}{/if}
|
||||
{#if IconComp}
|
||||
<IconComp size={20} weight="bold" class="pill-icon" />
|
||||
<IconComp size={iconPx} weight="bold" class="pill-icon" />
|
||||
{/if}
|
||||
{#if label && !iconOnly}
|
||||
<span class="pill-label">{label}</span>
|
||||
|
|
@ -69,7 +73,15 @@
|
|||
{#if href}
|
||||
<a
|
||||
{href}
|
||||
class={['pill', active && 'active', primary && 'primary', danger && 'danger', className]
|
||||
class={[
|
||||
'pill',
|
||||
`pill-${size}`,
|
||||
iconOnly && 'icon-only',
|
||||
active && 'active',
|
||||
primary && 'primary',
|
||||
danger && 'danger',
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
aria-label={ariaLabel}
|
||||
|
|
@ -82,7 +94,15 @@
|
|||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
class={['pill', active && 'active', primary && 'primary', danger && 'danger', className]
|
||||
class={[
|
||||
'pill',
|
||||
`pill-${size}`,
|
||||
iconOnly && 'icon-only',
|
||||
active && 'active',
|
||||
primary && 'primary',
|
||||
danger && 'danger',
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
aria-label={ariaLabel}
|
||||
|
|
@ -101,7 +121,6 @@
|
|||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0 0.875rem;
|
||||
height: 44px;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
|
|
@ -118,6 +137,20 @@
|
|||
0 2px 6px hsl(0 0% 0% / 0.04);
|
||||
}
|
||||
|
||||
.pill-md {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.pill-sm {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
/* Icon-only pill: wider than tall so it reads as a pill, not a chip. */
|
||||
.pill.icon-only {
|
||||
gap: 0;
|
||||
padding: 0 1.125rem;
|
||||
}
|
||||
|
||||
.pill:hover:not(:disabled) {
|
||||
background: hsl(var(--color-surface-hover, var(--color-card)));
|
||||
border-color: hsl(var(--color-border-strong, var(--color-border)));
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@
|
|||
import PillDropdown from './PillDropdown.svelte';
|
||||
import PillTabGroup from './PillTabGroup.svelte';
|
||||
import PillTagSelector from './PillTagSelector.svelte';
|
||||
import Pill from './Pill.svelte';
|
||||
import ManaLogoIcon from './ManaLogoIcon.svelte';
|
||||
import AppDrawer from './AppDrawer.svelte';
|
||||
import UserMenuPanel from './UserMenuPanel.svelte';
|
||||
import GlobalSpotlight from './GlobalSpotlight.svelte';
|
||||
|
|
@ -659,77 +661,38 @@
|
|||
direction={dropdownDirection}
|
||||
/>
|
||||
{:else if isNavItem(element)}
|
||||
<a href={element.href} class="pill glass-pill" class:active={isActive(element.href)}>
|
||||
{#if element.icon}
|
||||
{#if phosphorIcons[element.icon]}
|
||||
{@const IconComponent = phosphorIcons[element.icon]}
|
||||
<IconComponent size={18} weight="bold" class="pill-icon" />
|
||||
{/if}
|
||||
{/if}
|
||||
<span class="pill-label">{element.label}</span>
|
||||
</a>
|
||||
<Pill
|
||||
size="sm"
|
||||
href={element.href}
|
||||
icon={element.icon}
|
||||
label={element.label}
|
||||
active={isActive(element.href)}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
<!-- Navigation Items -->
|
||||
{#each items as item}
|
||||
{#if item.onClick}
|
||||
<button
|
||||
onclick={item.onClick}
|
||||
oncontextmenu={item.onContextMenu}
|
||||
class="pill glass-pill"
|
||||
class:active={item.active}
|
||||
class:icon-only={item.iconOnly}
|
||||
aria-label={item.iconOnly ? item.label : undefined}
|
||||
title={item.iconOnly ? item.label : undefined}
|
||||
>
|
||||
{#if item.icon}
|
||||
{#if item.icon === 'mana'}
|
||||
<svg class="pill-icon" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path
|
||||
d="M12.3047 1C12.3392 1.04573 19.608 10.6706 19.6084 14.6953C19.6084 18.7293 16.3386 21.9998 12.3047 22C8.27061 22 5 18.7294 5 14.6953C5.00041 10.661 12.3047 1 12.3047 1ZM12.3047 7.3916C12.2811 7.42276 8.65234 12.2288 8.65234 14.2393C8.65241 16.2562 10.2877 17.8916 12.3047 17.8916C14.3217 17.8916 15.957 16.2562 15.957 14.2393C15.957 12.2301 12.3331 7.42917 12.3047 7.3916Z"
|
||||
/>
|
||||
</svg>
|
||||
{:else if item.iconSvg}
|
||||
{@html item.iconSvg}
|
||||
{:else if phosphorIcons[item.icon]}
|
||||
{@const IconComponent = phosphorIcons[item.icon]}
|
||||
<IconComponent size={18} weight="bold" class="pill-icon" />
|
||||
{/if}
|
||||
{@const standardIcon =
|
||||
item.icon && item.icon !== 'mana' && !item.iconSvg ? item.icon : undefined}
|
||||
<Pill
|
||||
size="sm"
|
||||
href={item.onClick ? undefined : item.href}
|
||||
onclick={item.onClick}
|
||||
oncontextmenu={item.onContextMenu}
|
||||
icon={standardIcon}
|
||||
label={item.label}
|
||||
iconOnly={item.iconOnly}
|
||||
active={item.onClick ? item.active : isActive(item.href)}
|
||||
>
|
||||
{#snippet leading()}
|
||||
{#if item.icon === 'mana'}
|
||||
<ManaLogoIcon size={18} class="pill-icon" />
|
||||
{:else if item.iconSvg}
|
||||
{@html item.iconSvg}
|
||||
{/if}
|
||||
{#if !item.iconOnly}
|
||||
<span class="pill-label">{item.label}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{:else}
|
||||
<a
|
||||
href={item.href}
|
||||
oncontextmenu={item.onContextMenu}
|
||||
class="pill glass-pill"
|
||||
class:active={isActive(item.href)}
|
||||
class:icon-only={item.iconOnly}
|
||||
aria-label={item.iconOnly ? item.label : undefined}
|
||||
title={item.iconOnly ? item.label : undefined}
|
||||
>
|
||||
{#if item.icon}
|
||||
{#if item.icon === 'mana'}
|
||||
<svg class="pill-icon" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path
|
||||
d="M12.3047 1C12.3392 1.04573 19.608 10.6706 19.6084 14.6953C19.6084 18.7293 16.3386 21.9998 12.3047 22C8.27061 22 5 18.7294 5 14.6953C5.00041 10.661 12.3047 1 12.3047 1ZM12.3047 7.3916C12.2811 7.42276 8.65234 12.2288 8.65234 14.2393C8.65241 16.2562 10.2877 17.8916 12.3047 17.8916C14.3217 17.8916 15.957 16.2562 15.957 14.2393C15.957 12.2301 12.3331 7.42917 12.3047 7.3916Z"
|
||||
/>
|
||||
</svg>
|
||||
{:else if item.iconSvg}
|
||||
{@html item.iconSvg}
|
||||
{:else if phosphorIcons[item.icon]}
|
||||
{@const IconComponent = phosphorIcons[item.icon]}
|
||||
<IconComponent size={18} weight="bold" class="pill-icon" />
|
||||
{/if}
|
||||
{/if}
|
||||
{#if !item.iconOnly}
|
||||
<span class="pill-label">{item.label}</span>
|
||||
{/if}
|
||||
</a>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</Pill>
|
||||
{/each}
|
||||
|
||||
<!-- Additional Elements (Tab Groups, Dividers, Tag Selectors) -->
|
||||
|
|
@ -757,15 +720,13 @@
|
|||
direction={dropdownDirection}
|
||||
/>
|
||||
{:else if isNavItem(element)}
|
||||
<a href={element.href} class="pill glass-pill" class:active={isActive(element.href)}>
|
||||
{#if element.icon}
|
||||
{#if phosphorIcons[element.icon]}
|
||||
{@const IconComponent = phosphorIcons[element.icon]}
|
||||
<IconComponent size={18} weight="bold" class="pill-icon" />
|
||||
{/if}
|
||||
{/if}
|
||||
<span class="pill-label">{element.label}</span>
|
||||
</a>
|
||||
<Pill
|
||||
size="sm"
|
||||
href={element.href}
|
||||
icon={element.icon}
|
||||
label={element.label}
|
||||
active={isActive(element.href)}
|
||||
/>
|
||||
{/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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue