feat(ui): add shared ExpandableToolbar and unify toolbar dropdowns

- Create ExpandableToolbar shared component in shared-ui
- Migrate CalendarToolbar to use shared component (253 → 90 LOC)
- Migrate ContactsToolbar to use shared component (177 → 31 LOC)
- Add portal pattern to FilterBar dropdown for proper positioning
- Unify FilterBar dropdown styling with ContextMenu design
- Add fly transition with offset for smooth dropdown appearance
- Add ContactsToolbarContent for toolbar content separation
- Add filter store for contacts filter state management
- Add NewContactModal component
- Various contacts view improvements

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Till-JS 2025-12-14 16:14:30 +01:00
parent 9eb3f42483
commit 863f296733
23 changed files with 2347 additions and 787 deletions

View file

@ -15,6 +15,7 @@
linkLabel?: string;
searchPlaceholder?: string;
minStrength?: number;
showSearch?: boolean;
onSearch?: (query: string) => void;
onTagFilter?: (tagId: string | null) => void;
onSubtitleFilter?: (subtitle: string | null) => void;
@ -39,6 +40,7 @@
linkLabel = 'Verbindungen',
searchPlaceholder = 'Suchen...',
minStrength = 0,
showSearch = true,
onSearch,
onTagFilter,
onSubtitleFilter,
@ -122,22 +124,24 @@
<div class="network-controls">
<!-- Search bar -->
<div class="search-container">
<Search size={18} class="search-icon" />
<input
bind:this={searchInputElement}
type="text"
placeholder={searchPlaceholder}
value={searchInput}
oninput={handleSearchInput}
class="search-input"
/>
{#if searchInput}
<button onclick={clearSearch} class="clear-btn" aria-label="Suche löschen">
<X size={16} />
</button>
{/if}
</div>
{#if showSearch}
<div class="search-container">
<Search size={18} class="search-icon" />
<input
bind:this={searchInputElement}
type="text"
placeholder={searchPlaceholder}
value={searchInput}
oninput={handleSearchInput}
class="search-input"
/>
{#if searchInput}
<button onclick={clearSearch} class="clear-btn" aria-label="Suche löschen">
<X size={16} />
</button>
{/if}
</div>
{/if}
<!-- Filter toggle -->
{#if tags.length > 0 || subtitles.length > 0}