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

Feat: Tagmodal, fullscreenmode, tag groups, onepage design philosophy

Browse source
This commit is contained in:
Till-JS 2025-12-15 03:37:01 +01:00
parent 893c6ef0fb
commit bc0eecac95
36 changed files with 3542 additions and 343 deletions
Download patch file Download diff file Expand all files Collapse all files

79
packages/shared-ui/src/navigation/PillNavigation.svelte
View file

@ -536,32 +536,61 @@
<!-- Navigation Items -->
{#each items as item}
<a href={item.href} class="pill glass-pill" class:active={isActive(item.href)}>
{#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} class="pill-icon" />
{:else}
<svg class="pill-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d={getIconPath(item.icon)}
/>
</svg>
{#if item.onClick}
<button onclick={item.onClick} class="pill glass-pill" class:active={item.active}>
{#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} class="pill-icon" />
{:else}
<svg class="pill-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d={getIconPath(item.icon)}
/>
</svg>
{/if}
{/if}
{/if}
<span class="pill-label">{item.label}</span>
</a>
<span class="pill-label">{item.label}</span>
</button>
{:else}
<a href={item.href} class="pill glass-pill" class:active={isActive(item.href)}>
{#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} class="pill-icon" />
{:else}
<svg class="pill-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d={getIconPath(item.icon)}
/>
</svg>
{/if}
{/if}
<span class="pill-label">{item.label}</span>
</a>
{/if}
{/each}
<!-- Additional Elements (Tab Groups, Dividers) -->

6
packages/shared-ui/src/navigation/types.ts
View file

@ -14,12 +14,16 @@ export interface KeyboardShortcut {
export interface PillNavItem {
/** Display label for the navigation item */
label: string;
/** URL to navigate to */
/** URL to navigate to (ignored if onClick is provided) */
href: string;
/** Icon name (predefined) or 'mana' for special mana icon */
icon?: string;
/** Custom SVG icon HTML (for custom icons) */
iconSvg?: string;
/** Click handler - if provided, prevents navigation and calls this instead */
onClick?: () => void;
/** Whether this item is currently active/selected (for toggle buttons) */
active?: boolean;
}
export interface PillDropdownItem {