mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 20:01:09 +02:00
feat(shared-ui): unify bottom-stack bars with shared Pill component
- Extract Pill.svelte as the single visual primitive (44px, icon+label, active/primary/danger variants) used by PillDropdownBar and TagStrip. PillNav keeps its own internal .pill class (36px, icon-only-oriented). - Extract phosphor-icon-map.ts to deduplicate the icon lookup tables that previously lived inline in PillDropdownBar. - Unify bar slot heights in (app)/+layout.svelte: 56px PillNav, 64px for tags / quickinput / tabbar / dropdown-bar. Remove debug outlines. Collapse bottom-stack gap so bars sit flush below PillNav. - SceneAppBar wrapped in 64px slot, scene-pill/app-tab 40px to match. - Enforce single-bar policy: opening one bar closes the others. - QuickInputBar strip-down: remove leading CheckSquare icon and trailing nav-toggle snippet; bar is pure search input now. - Move user-menu (last PillNav pill) to bar-mode with short content: Einstellungen, Light/Dark/System segmented, Theme, Logout. - Swap tabs nav icon from Columns to Cards for better readability. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS
parent
ce646550cd
commit
b03bbe132e
7 changed files with 467 additions and 460 deletions
|
|
@ -68,91 +68,101 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="scene-app-bar">
|
||||
{#each scenes as scene (scene.id)}
|
||||
{@const isActive = scene.id === activeSceneId}
|
||||
<div class="scene-app-bar-wrapper">
|
||||
<div class="scene-app-bar">
|
||||
{#each scenes as scene (scene.id)}
|
||||
{@const isActive = scene.id === activeSceneId}
|
||||
|
||||
{#if isActive && pages.length > 0}
|
||||
<!-- Active scene + its app tabs wrapped in a visual group -->
|
||||
<div class="scene-group">
|
||||
{#if isActive && pages.length > 0}
|
||||
<!-- Active scene + its app tabs wrapped in a visual group -->
|
||||
<div class="scene-group">
|
||||
<button
|
||||
type="button"
|
||||
class="scene-pill active"
|
||||
onclick={() => onSceneSelect(scene.id)}
|
||||
oncontextmenu={(e) => onSceneContextMenu(e, scene)}
|
||||
>
|
||||
<span class="scene-name">{scene.name}</span>
|
||||
<span class="scene-count">{scene.openApps.length}</span>
|
||||
</button>
|
||||
<span class="group-sep"></span>
|
||||
{#each pages as p (p.id)}
|
||||
{@const AppIcon = p.icon}
|
||||
<button
|
||||
class="app-tab"
|
||||
onclick={() => onAppClick(p.id)}
|
||||
oncontextmenu={(e) => onAppContextMenu(e, p.id)}
|
||||
>
|
||||
{#if AppIcon}
|
||||
<span class="app-icon" style="color: {p.color}">
|
||||
<AppIcon size={12} weight="fill" />
|
||||
</span>
|
||||
{:else}
|
||||
<span class="app-dot" style="background-color: {p.color}"></span>
|
||||
{/if}
|
||||
<span class="app-title">{p.title}</span>
|
||||
</button>
|
||||
{/each}
|
||||
<button class="app-add" onclick={onAddApp} title="App hinzufügen">
|
||||
<Plus size={12} />
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
class="scene-pill active"
|
||||
class="scene-pill"
|
||||
class:active={isActive}
|
||||
onclick={() => onSceneSelect(scene.id)}
|
||||
oncontextmenu={(e) => onSceneContextMenu(e, scene)}
|
||||
>
|
||||
<span class="scene-name">{scene.name}</span>
|
||||
<span class="scene-count">{scene.openApps.length}</span>
|
||||
</button>
|
||||
<span class="group-sep"></span>
|
||||
{#each pages as p (p.id)}
|
||||
{@const AppIcon = p.icon}
|
||||
<button
|
||||
class="app-tab"
|
||||
onclick={() => onAppClick(p.id)}
|
||||
oncontextmenu={(e) => onAppContextMenu(e, p.id)}
|
||||
>
|
||||
{#if AppIcon}
|
||||
<span class="app-icon" style="color: {p.color}">
|
||||
<AppIcon size={12} weight="fill" />
|
||||
</span>
|
||||
{:else}
|
||||
<span class="app-dot" style="background-color: {p.color}"></span>
|
||||
{/if}
|
||||
<span class="app-title">{p.title}</span>
|
||||
</button>
|
||||
{/each}
|
||||
<button class="app-add" onclick={onAddApp} title="App hinzufügen">
|
||||
<Plus size={12} />
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
{#if creating}
|
||||
<div class="inline-create">
|
||||
<input
|
||||
bind:this={inputEl}
|
||||
class="inline-create-input"
|
||||
type="text"
|
||||
maxlength="40"
|
||||
placeholder="Name…"
|
||||
bind:value={newName}
|
||||
onkeydown={handleInputKeydown}
|
||||
onblur={submitCreate}
|
||||
/>
|
||||
<button class="inline-create-btn confirm" onclick={submitCreate} title="Erstellen">
|
||||
<Check size={14} weight="bold" />
|
||||
</button>
|
||||
<button class="inline-create-btn cancel" onclick={cancelCreate} title="Abbrechen">
|
||||
<X size={14} weight="bold" />
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
class="scene-pill"
|
||||
class:active={isActive}
|
||||
onclick={() => onSceneSelect(scene.id)}
|
||||
oncontextmenu={(e) => onSceneContextMenu(e, scene)}
|
||||
>
|
||||
<span class="scene-name">{scene.name}</span>
|
||||
<span class="scene-count">{scene.openApps.length}</span>
|
||||
<button type="button" class="scene-add" onclick={startCreate} title="Neue Szene">
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
{#if creating}
|
||||
<div class="inline-create">
|
||||
<input
|
||||
bind:this={inputEl}
|
||||
class="inline-create-input"
|
||||
type="text"
|
||||
maxlength="40"
|
||||
placeholder="Name…"
|
||||
bind:value={newName}
|
||||
onkeydown={handleInputKeydown}
|
||||
onblur={submitCreate}
|
||||
/>
|
||||
<button class="inline-create-btn confirm" onclick={submitCreate} title="Erstellen">
|
||||
<Check size={14} weight="bold" />
|
||||
</button>
|
||||
<button class="inline-create-btn cancel" onclick={cancelCreate} title="Abbrechen">
|
||||
<X size={14} weight="bold" />
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<button type="button" class="scene-add" onclick={startCreate} title="Neue Szene">
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.scene-app-bar-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* Bar slot (see bottomChromeHeight in (app)/+layout.svelte). */
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.scene-app-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
padding: 0.125rem 0.5rem;
|
||||
margin: 0 auto;
|
||||
width: fit-content;
|
||||
max-width: calc(100vw - 2rem);
|
||||
|
|
@ -174,7 +184,7 @@
|
|||
background: hsl(var(--color-primary) / 0.1);
|
||||
border: 1.5px solid hsl(var(--color-primary) / 0.25);
|
||||
border-radius: 9999px;
|
||||
padding: 0.1875rem;
|
||||
padding: 0.125rem;
|
||||
}
|
||||
|
||||
/* Scene pills */
|
||||
|
|
@ -188,7 +198,8 @@
|
|||
color: hsl(var(--color-muted-foreground));
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 0 0.875rem;
|
||||
height: 40px;
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
|
|
@ -292,7 +303,8 @@
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 0 0.875rem;
|
||||
height: 40px;
|
||||
border-radius: 9999px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
|
|
|
|||
172
packages/shared-ui/src/navigation/Pill.svelte
Normal file
172
packages/shared-ui/src/navigation/Pill.svelte
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
import { phosphorIcons } from './phosphor-icon-map';
|
||||
|
||||
interface Props {
|
||||
/** Phosphor icon name (see phosphor-icon-map.ts). */
|
||||
icon?: string;
|
||||
/** URL to navigate to. If set, renders an <a>; otherwise a <button>. */
|
||||
href?: string;
|
||||
/** Display label. Use `iconOnly` to hide. */
|
||||
label?: string;
|
||||
/** Hide label (label is still used for aria-label/title). */
|
||||
iconOnly?: boolean;
|
||||
/** Active/selected state */
|
||||
active?: boolean;
|
||||
/** Primary accent (e.g. "Erstellen") */
|
||||
primary?: boolean;
|
||||
/** Destructive style (e.g. Logout) */
|
||||
danger?: boolean;
|
||||
/** Disabled state (button only) */
|
||||
disabled?: boolean;
|
||||
/** Click handler */
|
||||
onclick?: (e: MouseEvent) => void;
|
||||
/** Right-click handler */
|
||||
oncontextmenu?: (e: MouseEvent) => void;
|
||||
/** Tooltip */
|
||||
title?: string;
|
||||
/** Extra class names (e.g. drag-source marker) */
|
||||
class?: string;
|
||||
/** Custom content rendered before the label (e.g. colored tag dot). */
|
||||
leading?: Snippet;
|
||||
/** Custom content rendered after the label. */
|
||||
trailing?: Snippet;
|
||||
}
|
||||
|
||||
let {
|
||||
icon,
|
||||
href,
|
||||
label,
|
||||
iconOnly = false,
|
||||
active = false,
|
||||
primary = false,
|
||||
danger = false,
|
||||
disabled = false,
|
||||
onclick,
|
||||
oncontextmenu,
|
||||
title,
|
||||
class: className,
|
||||
leading,
|
||||
trailing,
|
||||
}: Props = $props();
|
||||
|
||||
const IconComp = $derived(icon ? phosphorIcons[icon] : null);
|
||||
const ariaLabel = $derived(iconOnly ? label : undefined);
|
||||
const effectiveTitle = $derived(title ?? (iconOnly ? label : undefined));
|
||||
</script>
|
||||
|
||||
{#snippet body()}
|
||||
{#if leading}{@render leading()}{/if}
|
||||
{#if IconComp}
|
||||
<IconComp size={20} weight="bold" class="pill-icon" />
|
||||
{/if}
|
||||
{#if label && !iconOnly}
|
||||
<span class="pill-label">{label}</span>
|
||||
{/if}
|
||||
{#if trailing}{@render trailing()}{/if}
|
||||
{/snippet}
|
||||
|
||||
{#if href}
|
||||
<a
|
||||
{href}
|
||||
class={['pill', active && 'active', primary && 'primary', danger && 'danger', className]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
aria-label={ariaLabel}
|
||||
title={effectiveTitle}
|
||||
{onclick}
|
||||
{oncontextmenu}
|
||||
>
|
||||
{@render body()}
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
class={['pill', active && 'active', primary && 'primary', danger && 'danger', className]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
aria-label={ariaLabel}
|
||||
title={effectiveTitle}
|
||||
{disabled}
|
||||
{onclick}
|
||||
{oncontextmenu}
|
||||
>
|
||||
{@render body()}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0 0.875rem;
|
||||
height: 44px;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.15s ease;
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
background: hsl(var(--color-card));
|
||||
color: hsl(var(--color-foreground));
|
||||
box-shadow:
|
||||
0 1px 2px hsl(0 0% 0% / 0.05),
|
||||
0 2px 6px hsl(0 0% 0% / 0.04);
|
||||
}
|
||||
|
||||
.pill:hover:not(:disabled) {
|
||||
background: hsl(var(--color-surface-hover, var(--color-card)));
|
||||
border-color: hsl(var(--color-border-strong, var(--color-border)));
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.pill:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.pill:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.pill.active {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--pill-primary-color, var(--color-primary-500, #f8d62b)) 20%,
|
||||
white 80%
|
||||
);
|
||||
border-color: var(--pill-primary-color, var(--color-primary-500, rgba(248, 214, 43, 0.5)));
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
:global(.dark) .pill.active {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--pill-primary-color, var(--color-primary-500, #f8d62b)) 30%,
|
||||
transparent 70%
|
||||
);
|
||||
color: var(--pill-primary-color, var(--color-primary-500, #f8d62b));
|
||||
}
|
||||
|
||||
.pill.primary {
|
||||
background: var(--pill-primary-color, var(--color-primary-500, #6366f1));
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pill.danger {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
:global(.dark) .pill.danger {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.pill :global(.pill-label) {
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,125 +1,7 @@
|
|||
<script lang="ts">
|
||||
import type { PillDropdownItem } from './types';
|
||||
import {
|
||||
Archive,
|
||||
Bell,
|
||||
Buildings,
|
||||
CalendarBlank,
|
||||
CaretDown,
|
||||
ChartBar,
|
||||
ChatCircle,
|
||||
Check,
|
||||
CheckCircle,
|
||||
CheckSquare,
|
||||
Clock,
|
||||
Cloud,
|
||||
Columns,
|
||||
Compass,
|
||||
CreditCard,
|
||||
File,
|
||||
FileText,
|
||||
Fire,
|
||||
Folder,
|
||||
Gear,
|
||||
Gift,
|
||||
Globe,
|
||||
GridFour,
|
||||
Heart,
|
||||
House,
|
||||
Key,
|
||||
List,
|
||||
MagnifyingGlass,
|
||||
Microphone,
|
||||
Moon,
|
||||
MusicNote,
|
||||
MusicNotes,
|
||||
Palette,
|
||||
Playlist,
|
||||
Plus,
|
||||
Question,
|
||||
Robot,
|
||||
Scales,
|
||||
ShareFat,
|
||||
ShareNetwork,
|
||||
Shield,
|
||||
SignOut,
|
||||
Sparkle,
|
||||
Spiral,
|
||||
Sun,
|
||||
Tag,
|
||||
Target,
|
||||
Timer,
|
||||
Trash,
|
||||
Tray,
|
||||
Upload,
|
||||
User,
|
||||
Users,
|
||||
Waveform,
|
||||
} from '@mana/shared-icons';
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const phosphorIcons: Record<string, any> = {
|
||||
home: House,
|
||||
users: Users,
|
||||
user: User,
|
||||
tag: Tag,
|
||||
heart: Heart,
|
||||
settings: Gear,
|
||||
chat: ChatCircle,
|
||||
'help-circle': Question,
|
||||
help: Question,
|
||||
'share-2': ShareNetwork,
|
||||
bell: Bell,
|
||||
clock: Clock,
|
||||
timer: Timer,
|
||||
target: Target,
|
||||
globe: Globe,
|
||||
inbox: Tray,
|
||||
check: Check,
|
||||
checkCircle: CheckCircle,
|
||||
'check-square': CheckSquare,
|
||||
plus: Plus,
|
||||
columns: Columns,
|
||||
kanban: Columns,
|
||||
mic: Microphone,
|
||||
calendar: CalendarBlank,
|
||||
folder: Folder,
|
||||
archive: Archive,
|
||||
upload: Upload,
|
||||
music: MusicNote,
|
||||
document: File,
|
||||
chart: ChartBar,
|
||||
'bar-chart-3': ChartBar,
|
||||
search: MagnifyingGlass,
|
||||
list: List,
|
||||
compass: Compass,
|
||||
moon: Moon,
|
||||
sun: Sun,
|
||||
logout: SignOut,
|
||||
chevronDown: CaretDown,
|
||||
menu: List,
|
||||
fire: Fire,
|
||||
grid: GridFour,
|
||||
gridSmall: GridFour,
|
||||
palette: Palette,
|
||||
creditCard: CreditCard,
|
||||
building: Buildings,
|
||||
scale: Scales,
|
||||
robot: Robot,
|
||||
key: Key,
|
||||
shield: Shield,
|
||||
gift: Gift,
|
||||
'music-notes': MusicNotes,
|
||||
playlist: Playlist,
|
||||
waveform: Waveform,
|
||||
'file-text': FileText,
|
||||
sparkle: Sparkle,
|
||||
sparkles: Sparkle,
|
||||
spiral: Spiral,
|
||||
share: ShareFat,
|
||||
trash: Trash,
|
||||
cloud: Cloud,
|
||||
};
|
||||
import { phosphorIcons } from './phosphor-icon-map';
|
||||
import Pill from './Pill.svelte';
|
||||
|
||||
interface Props {
|
||||
/** Items to render as pills in the bar */
|
||||
|
|
@ -189,13 +71,7 @@
|
|||
<div class="dropdown-bar-wrapper" class:static={positioning === 'static'}>
|
||||
<div class="dropdown-bar-container">
|
||||
{#if label}
|
||||
<div class="bar-label glass-pill">
|
||||
{#if icon && phosphorIcons[icon]}
|
||||
{@const IconComponent = phosphorIcons[icon]}
|
||||
<IconComponent size={16} />
|
||||
{/if}
|
||||
<span>{label}</span>
|
||||
</div>
|
||||
<Pill {icon} {label} disabled class="bar-label" />
|
||||
{/if}
|
||||
|
||||
{#each renderElements as el (el.id)}
|
||||
|
|
@ -233,7 +109,7 @@
|
|||
</svg>
|
||||
{:else if gi.icon && phosphorIcons[gi.icon]}
|
||||
{@const GIcon = phosphorIcons[gi.icon]}
|
||||
<GIcon size={16} class="segmented-icon" />
|
||||
<GIcon size={20} weight="bold" class="segmented-icon" />
|
||||
{/if}
|
||||
{#if showLabels}
|
||||
<span class="segmented-label">{gi.label}</span>
|
||||
|
|
@ -243,24 +119,22 @@
|
|||
</div>
|
||||
{:else}
|
||||
{@const item = el.item}
|
||||
<button
|
||||
type="button"
|
||||
class="bar-pill glass-pill"
|
||||
class:active={item.active}
|
||||
class:primary={item.primary}
|
||||
class:danger={item.danger}
|
||||
<Pill
|
||||
icon={item.imageUrl ? undefined : item.icon}
|
||||
label={item.label}
|
||||
active={item.active}
|
||||
primary={item.primary}
|
||||
danger={item.danger}
|
||||
disabled={item.disabled}
|
||||
onclick={(e) => handleClick(item, e)}
|
||||
title={item.label}
|
||||
>
|
||||
{#if item.imageUrl}
|
||||
<img src={item.imageUrl} alt="" class="bar-img" />
|
||||
{:else if item.icon && phosphorIcons[item.icon]}
|
||||
{@const IconComponent = phosphorIcons[item.icon]}
|
||||
<IconComponent size={16} />
|
||||
{/if}
|
||||
<span>{item.label}</span>
|
||||
</button>
|
||||
{#snippet leading()}
|
||||
{#if item.imageUrl}
|
||||
<img src={item.imageUrl} alt="" class="bar-img" />
|
||||
{/if}
|
||||
{/snippet}
|
||||
</Pill>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
|
@ -271,7 +145,10 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
/* Matches tags/tabbar/quickinput slot (see bottomChromeHeight in (app)/+layout.svelte). */
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.dropdown-bar-wrapper.static {
|
||||
|
|
@ -287,7 +164,7 @@
|
|||
max-width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 0.5rem 2rem;
|
||||
padding: 0 2rem;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
|
|
@ -311,82 +188,12 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.bar-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.5rem 0.875rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
background: hsl(var(--color-card));
|
||||
color: hsl(var(--color-foreground));
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.15s ease;
|
||||
box-shadow:
|
||||
0 1px 2px hsl(0 0% 0% / 0.05),
|
||||
0 2px 6px hsl(0 0% 0% / 0.04);
|
||||
}
|
||||
|
||||
.bar-pill:hover:not(:disabled) {
|
||||
background: hsl(var(--color-surface-hover, var(--color-card)));
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.bar-pill:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.bar-pill.active {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--pill-primary-color, var(--color-primary-500, #f8d62b)) 20%,
|
||||
white 80%
|
||||
);
|
||||
border-color: var(--pill-primary-color, var(--color-primary-500, rgba(248, 214, 43, 0.5)));
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
:global(.dark) .bar-pill.active {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--pill-primary-color, var(--color-primary-500, #f8d62b)) 30%,
|
||||
transparent 70%
|
||||
);
|
||||
color: var(--pill-primary-color, var(--color-primary-500, #f8d62b));
|
||||
}
|
||||
|
||||
.bar-pill.primary {
|
||||
background: var(--pill-primary-color, var(--color-primary-500, #6366f1));
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.bar-pill.danger {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
:global(.dark) .bar-pill.danger {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.bar-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.5rem 0.875rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
background: hsl(var(--color-muted, var(--color-card)));
|
||||
color: hsl(var(--color-foreground));
|
||||
flex-shrink: 0;
|
||||
/* .bar-label override: muted background, non-interactive */
|
||||
:global(.bar-label) {
|
||||
opacity: 1 !important;
|
||||
cursor: default !important;
|
||||
background: hsl(var(--color-muted, var(--color-card))) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.bar-divider {
|
||||
|
|
@ -423,6 +230,7 @@
|
|||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem;
|
||||
height: 44px;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
background: hsl(var(--color-card));
|
||||
|
|
@ -436,7 +244,9 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.375rem;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 9999px;
|
||||
|
|
@ -466,8 +276,8 @@
|
|||
}
|
||||
|
||||
.segmented-btn :global(.segmented-icon) {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
/* When the group shows labels, give the buttons more padding */
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { Tag, Plus, X } from '@mana/shared-icons';
|
||||
import { dragSource } from '../dnd/drag-source';
|
||||
import { passiveDropZone } from '../dnd/passive-drop';
|
||||
import type { DragPayload, DragType } from '../dnd/types';
|
||||
import Pill from './Pill.svelte';
|
||||
|
||||
interface TagItem {
|
||||
id: string;
|
||||
|
|
@ -73,38 +73,33 @@
|
|||
>
|
||||
<div class="tag-strip-container">
|
||||
<!-- Clear Filter Button (always rendered to prevent layout shift) -->
|
||||
<button
|
||||
class="clear-filter-pill glass-tag"
|
||||
class:hidden={!hasSelectedTags}
|
||||
onclick={() => onClear()}
|
||||
title="Filter löschen"
|
||||
disabled={!hasSelectedTags}
|
||||
>
|
||||
<X size={16} weight="bold" />
|
||||
<span class="tag-name">Filter</span>
|
||||
</button>
|
||||
<div class:hidden={!hasSelectedTags} class="filter-slot">
|
||||
<Pill
|
||||
icon="x"
|
||||
label="Filter"
|
||||
danger
|
||||
onclick={() => onClear()}
|
||||
title="Filter löschen"
|
||||
disabled={!hasSelectedTags}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Tags verwalten Pill -->
|
||||
<button
|
||||
class="manage-pill glass-tag"
|
||||
<Pill
|
||||
icon="tag"
|
||||
label="Tags verwalten"
|
||||
onclick={() => goto(managementHref)}
|
||||
title="Tags verwalten"
|
||||
>
|
||||
<Tag size={18} weight="bold" />
|
||||
<span class="tag-name">Tags verwalten</span>
|
||||
</button>
|
||||
/>
|
||||
|
||||
{#if loading}
|
||||
<div class="loading-state">Lädt...</div>
|
||||
{:else if !hasTags}
|
||||
<button class="empty-state glass-tag" onclick={() => goto(managementHref)}>
|
||||
<span>Keine Tags vorhanden</span>
|
||||
<span class="add-hint">+ Erstellen</span>
|
||||
</button>
|
||||
<Pill label="Keine Tags vorhanden — + Erstellen" onclick={() => goto(managementHref)} />
|
||||
{:else}
|
||||
{#each sortedTags as tag (tag.id)}
|
||||
<button
|
||||
class="tag-pill glass-tag"
|
||||
class="tag-pill"
|
||||
class:selected={isTagSelected(tag.id)}
|
||||
onclick={() => onToggle(tag.id)}
|
||||
title={tag.name}
|
||||
|
|
@ -127,14 +122,13 @@
|
|||
|
||||
<!-- Create Tag Button -->
|
||||
{#if showCreateButton}
|
||||
<button
|
||||
class="create-pill glass-tag"
|
||||
<Pill
|
||||
icon="plus"
|
||||
label="Neuer Tag"
|
||||
primary
|
||||
onclick={() => goto(resolvedCreateHref)}
|
||||
title="Neuer Tag"
|
||||
>
|
||||
<Plus size={16} weight="bold" />
|
||||
<span class="tag-name">Neuer Tag</span>
|
||||
</button>
|
||||
/>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -156,8 +150,11 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
transition: bottom 0.2s ease;
|
||||
/* Tight wrapper around 44px pills (see bottomChromeHeight in (app)/+layout.svelte). */
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
/* When filter strip is also visible, stack above it */
|
||||
|
|
@ -168,14 +165,14 @@
|
|||
.tag-strip-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
gap: 0.5rem;
|
||||
background: transparent;
|
||||
pointer-events: auto;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 0.5rem 2rem;
|
||||
padding: 0;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
|
|
@ -200,20 +197,33 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.tag-pill,
|
||||
.manage-pill,
|
||||
.create-pill,
|
||||
.clear-filter-pill {
|
||||
display: flex;
|
||||
/* Tag pill — matches Pill base, with drag-source and colored dot. */
|
||||
.tag-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
min-height: 44px;
|
||||
gap: 0.375rem;
|
||||
padding: 0 0.875rem;
|
||||
height: 44px;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
background: hsl(var(--color-card));
|
||||
color: hsl(var(--color-foreground));
|
||||
box-shadow:
|
||||
0 1px 2px hsl(0 0% 0% / 0.05),
|
||||
0 2px 6px hsl(0 0% 0% / 0.04);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
/* Selected tag state */
|
||||
.tag-pill:hover {
|
||||
background: hsl(var(--color-surface-hover, var(--color-card)));
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.tag-pill.selected {
|
||||
background: var(--tag-color) !important;
|
||||
border-color: var(--tag-color) !important;
|
||||
|
|
@ -227,107 +237,12 @@
|
|||
color: white;
|
||||
}
|
||||
|
||||
/* Clear filter pill */
|
||||
.clear-filter-pill {
|
||||
color: #ef4444;
|
||||
background: rgba(239, 68, 68, 0.1) !important;
|
||||
border-color: rgba(239, 68, 68, 0.3) !important;
|
||||
}
|
||||
|
||||
.clear-filter-pill .tag-name {
|
||||
color: #ef4444;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:global(.dark) .clear-filter-pill {
|
||||
color: #f87171;
|
||||
background: rgba(239, 68, 68, 0.15) !important;
|
||||
border-color: rgba(239, 68, 68, 0.3) !important;
|
||||
}
|
||||
|
||||
:global(.dark) .clear-filter-pill .tag-name {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.clear-filter-pill:hover:not(.hidden) {
|
||||
background: rgba(239, 68, 68, 0.2) !important;
|
||||
border-color: rgba(239, 68, 68, 0.5) !important;
|
||||
}
|
||||
|
||||
.clear-filter-pill.hidden {
|
||||
.filter-slot.hidden {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Manage pill with neutral style */
|
||||
.manage-pill {
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.manage-pill .tag-name {
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:global(.dark) .manage-pill {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
|
||||
:global(.dark) .manage-pill .tag-name {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
|
||||
/* Create pill with neutral style */
|
||||
.create-pill {
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.create-pill .tag-name {
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:global(.dark) .create-pill {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
|
||||
:global(.dark) .create-pill .tag-name {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
|
||||
/* Glass tag styling */
|
||||
.glass-tag {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 9999px;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
:global(.dark) .glass-tag {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass-tag:hover {
|
||||
transform: scale(1.05);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-color: rgba(0, 0, 0, 0.15);
|
||||
box-shadow:
|
||||
0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:global(.dark) .glass-tag:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.glass-tag:active {
|
||||
.tag-pill:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
|
|
@ -340,7 +255,7 @@
|
|||
}
|
||||
|
||||
.tag-name {
|
||||
font-size: 0.9375rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
white-space: nowrap;
|
||||
|
|
@ -356,26 +271,6 @@
|
|||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
:global(.dark) .empty-state {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.add-hint {
|
||||
font-size: 0.875rem;
|
||||
color: #8b5cf6;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* DnD: Tag is being dragged */
|
||||
:global(.tag-pill.mana-drag-source-active) {
|
||||
opacity: 0.5;
|
||||
|
|
@ -407,7 +302,7 @@
|
|||
}
|
||||
|
||||
.tag-strip-container {
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ export { default as NavLink } from './NavLink.svelte';
|
|||
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 PillNavigation } from './PillNavigation.svelte';
|
||||
export { default as PillDropdown } from './PillDropdown.svelte';
|
||||
export { default as PillDropdownBar } from './PillDropdownBar.svelte';
|
||||
|
|
|
|||
126
packages/shared-ui/src/navigation/phosphor-icon-map.ts
Normal file
126
packages/shared-ui/src/navigation/phosphor-icon-map.ts
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
import {
|
||||
Archive,
|
||||
Bell,
|
||||
Buildings,
|
||||
CalendarBlank,
|
||||
CaretDown,
|
||||
ChartBar,
|
||||
ChatCircle,
|
||||
Check,
|
||||
CheckCircle,
|
||||
CheckSquare,
|
||||
Clock,
|
||||
Cloud,
|
||||
Columns,
|
||||
Compass,
|
||||
CreditCard,
|
||||
File,
|
||||
FileText,
|
||||
Fire,
|
||||
Folder,
|
||||
Gear,
|
||||
Gift,
|
||||
Globe,
|
||||
GridFour,
|
||||
Heart,
|
||||
House,
|
||||
Key,
|
||||
List,
|
||||
MagnifyingGlass,
|
||||
Microphone,
|
||||
Moon,
|
||||
MusicNote,
|
||||
MusicNotes,
|
||||
Palette,
|
||||
Playlist,
|
||||
Plus,
|
||||
Question,
|
||||
Robot,
|
||||
Scales,
|
||||
ShareFat,
|
||||
ShareNetwork,
|
||||
Shield,
|
||||
SignOut,
|
||||
Sparkle,
|
||||
Spiral,
|
||||
Cards,
|
||||
Sun,
|
||||
Tag,
|
||||
Target,
|
||||
Timer,
|
||||
Trash,
|
||||
Tray,
|
||||
Upload,
|
||||
User,
|
||||
Users,
|
||||
Waveform,
|
||||
X,
|
||||
} from '@mana/shared-icons';
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
export const phosphorIcons: Record<string, any> = {
|
||||
home: House,
|
||||
users: Users,
|
||||
user: User,
|
||||
tag: Tag,
|
||||
heart: Heart,
|
||||
settings: Gear,
|
||||
chat: ChatCircle,
|
||||
'help-circle': Question,
|
||||
help: Question,
|
||||
'share-2': ShareNetwork,
|
||||
bell: Bell,
|
||||
clock: Clock,
|
||||
timer: Timer,
|
||||
target: Target,
|
||||
globe: Globe,
|
||||
inbox: Tray,
|
||||
check: Check,
|
||||
checkCircle: CheckCircle,
|
||||
'check-square': CheckSquare,
|
||||
plus: Plus,
|
||||
columns: Columns,
|
||||
kanban: Columns,
|
||||
mic: Microphone,
|
||||
calendar: CalendarBlank,
|
||||
folder: Folder,
|
||||
archive: Archive,
|
||||
upload: Upload,
|
||||
music: MusicNote,
|
||||
document: File,
|
||||
chart: ChartBar,
|
||||
'bar-chart-3': ChartBar,
|
||||
search: MagnifyingGlass,
|
||||
list: List,
|
||||
compass: Compass,
|
||||
moon: Moon,
|
||||
sun: Sun,
|
||||
logout: SignOut,
|
||||
chevronDown: CaretDown,
|
||||
menu: List,
|
||||
fire: Fire,
|
||||
grid: GridFour,
|
||||
gridSmall: GridFour,
|
||||
palette: Palette,
|
||||
creditCard: CreditCard,
|
||||
building: Buildings,
|
||||
scale: Scales,
|
||||
robot: Robot,
|
||||
key: Key,
|
||||
shield: Shield,
|
||||
gift: Gift,
|
||||
'music-notes': MusicNotes,
|
||||
playlist: Playlist,
|
||||
waveform: Waveform,
|
||||
'file-text': FileText,
|
||||
sparkle: Sparkle,
|
||||
sparkles: Sparkle,
|
||||
spiral: Spiral,
|
||||
share: ShareFat,
|
||||
trash: Trash,
|
||||
cloud: Cloud,
|
||||
x: X,
|
||||
close: X,
|
||||
tabs: Cards,
|
||||
cards: Cards,
|
||||
};
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
|
||||
import type { Snippet } from 'svelte';
|
||||
import { ArrowRight, Check, CheckSquare, Heart, MagnifyingGlass, Plus } from '@mana/shared-icons';
|
||||
import { ArrowRight, Heart, MagnifyingGlass, Plus } from '@mana/shared-icons';
|
||||
|
||||
interface Props {
|
||||
onSearch: (query: string) => Promise<QuickInputItem[]>;
|
||||
|
|
@ -508,15 +508,6 @@
|
|||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="app-icon" class:success-icon={createSuccess}>
|
||||
{#if createSuccess}
|
||||
<!-- Checkmark icon -->
|
||||
<Check size={20} />
|
||||
{:else}
|
||||
<CheckSquare size={20} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="input-wrapper">
|
||||
<!-- Highlight backdrop (shows colored keywords) -->
|
||||
<div class="input-highlight-backdrop" aria-hidden="true">
|
||||
|
|
@ -583,10 +574,10 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
z-index: 90;
|
||||
padding: 0.75rem 1rem;
|
||||
padding: 0.3125rem 1rem;
|
||||
pointer-events: none;
|
||||
/* Fixed height to prevent layout shift when results appear */
|
||||
height: 72px;
|
||||
/* Matches tags/tabbar slot (see bottomChromeHeight in (app)/+layout.svelte). */
|
||||
height: 64px;
|
||||
transition: bottom 0.3s ease;
|
||||
}
|
||||
|
||||
|
|
@ -599,13 +590,13 @@
|
|||
/* Mobile: tighter padding, full-width input */
|
||||
@media (max-width: 640px) {
|
||||
.quick-input-bar {
|
||||
padding: 0.5rem 0.5rem;
|
||||
padding: 0.3125rem 0.5rem;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
padding: 0.5rem 1rem;
|
||||
height: 48px;
|
||||
height: 54px;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue