mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-17 11:19:38 +02:00
refactor(shared-ui): replace remaining inline SVGs with Phosphor icons
Migrate 41 inline SVG icons to Phosphor components across 21 shared-ui files including CommandBar, InputBar, Sidebar, AudioPlayer, PageHeader, Select, TagBadge, SettingsRow, and more. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS
parent
25e39620ec
commit
47f981fbc4
21 changed files with 122 additions and 480 deletions
|
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import type { CommandBarItem, QuickAction, CreatePreview } from './CommandBar.types';
|
||||
import { Heart, MagnifyingGlass, Plus } from '@manacore/shared-icons';
|
||||
|
||||
// Syntax highlighting patterns for command keywords
|
||||
interface HighlightPattern {
|
||||
|
|
@ -245,14 +246,7 @@
|
|||
<div class="command-modal">
|
||||
<!-- Search Input with Syntax Highlighting -->
|
||||
<div class="command-input-wrapper">
|
||||
<svg class="command-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||
/>
|
||||
</svg>
|
||||
<MagnifyingGlass size={20} class="command-icon" />
|
||||
<div class="input-highlight-container">
|
||||
<!-- Highlight backdrop (shows colored keywords) -->
|
||||
<div class="input-highlight-backdrop" aria-hidden="true">
|
||||
|
|
@ -288,14 +282,7 @@
|
|||
{#if creating}
|
||||
<div class="loading-spinner-small"></div>
|
||||
{:else}
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 4v16m8-8H4"
|
||||
/>
|
||||
</svg>
|
||||
<Plus size={20} />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="result-info">
|
||||
|
|
@ -352,11 +339,7 @@
|
|||
{/if}
|
||||
</div>
|
||||
{#if item.isFavorite}
|
||||
<svg class="result-favorite" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
|
||||
/>
|
||||
</svg>
|
||||
<Heart size={20} weight="fill" class="result-favorite" />
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
|
|
@ -373,78 +356,7 @@
|
|||
onclick={() => handleQuickAction(action)}
|
||||
onmouseenter={() => (selectedIndex = index)}
|
||||
>
|
||||
<svg class="quick-action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
{#if action.icon === 'plus'}
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 4v16m8-8H4"
|
||||
/>
|
||||
{:else if action.icon === 'heart'}
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
|
||||
/>
|
||||
{:else if action.icon === 'tag'}
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
|
||||
/>
|
||||
{:else if action.icon === 'upload'}
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
|
||||
/>
|
||||
{:else if action.icon === 'calendar'}
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
/>
|
||||
{:else if action.icon === 'clock'}
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
{:else if action.icon === 'check'}
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
{:else if action.icon === 'settings'}
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
{:else if action.icon === 'list'}
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 10h16M4 14h16M4 18h16"
|
||||
/>
|
||||
{/if}
|
||||
</svg>
|
||||
<Plus size={20} class="quick-action-icon" />
|
||||
<span>{action.label}</span>
|
||||
{#if action.shortcut}
|
||||
<kbd>{action.shortcut}</kbd>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { Check } from '@manacore/shared-icons';
|
||||
|
||||
let isOnline = $state(true);
|
||||
let showReconnected = $state(false);
|
||||
|
|
@ -58,9 +59,7 @@
|
|||
</svg>
|
||||
<span>Offline</span>
|
||||
{:else if showReconnected}
|
||||
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<Check size={20} />
|
||||
<span>Wieder online</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
*/
|
||||
|
||||
import { Text } from '../atoms';
|
||||
import { CaretDown } from '@manacore/shared-icons';
|
||||
|
||||
export interface KeyboardShortcut {
|
||||
/** Key combination (e.g., ['Ctrl', 'S'] or ['Cmd', 'Shift', 'P']) */
|
||||
|
|
@ -110,19 +111,10 @@
|
|||
<Text variant="small" weight="medium">{title}</Text>
|
||||
</div>
|
||||
{#if collapsible}
|
||||
<svg
|
||||
class="w-4 h-4 text-theme-secondary transition-transform {expanded ? 'rotate-180' : ''}"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
<CaretDown
|
||||
size={16}
|
||||
class="text-theme-secondary transition-transform {expanded ? 'rotate-180' : ''}"
|
||||
/>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
|
||||
import type { Snippet } from 'svelte';
|
||||
import { Text } from '../atoms';
|
||||
import { CaretLeft } from '@manacore/shared-icons';
|
||||
|
||||
type HeaderSize = 'sm' | 'md' | 'lg';
|
||||
|
||||
|
|
@ -125,14 +126,7 @@
|
|||
class="absolute left-0 p-1.5 rounded-lg text-theme-secondary hover:text-theme hover:bg-theme-secondary/10 transition-colors"
|
||||
aria-label="Zurück"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 19l-7-7 7-7"
|
||||
/>
|
||||
</svg>
|
||||
<CaretLeft size={20} />
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
|
|
@ -171,14 +165,7 @@
|
|||
class="page-header__back flex-shrink-0 p-1.5 -ml-1.5 rounded-lg text-theme-secondary hover:text-theme hover:bg-theme-secondary/10 transition-colors"
|
||||
aria-label="Zurück"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 19l-7-7 7-7"
|
||||
/>
|
||||
</svg>
|
||||
<CaretLeft size={20} />
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import type { SelectOption } from './Select.types';
|
||||
import { CaretDown } from '@manacore/shared-icons';
|
||||
|
||||
interface Props {
|
||||
/** Current selected value */
|
||||
|
|
@ -73,9 +74,7 @@
|
|||
{/each}
|
||||
</select>
|
||||
<div class="select-icon">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
<CaretDown size={16} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@
|
|||
|
||||
import type { Snippet } from 'svelte';
|
||||
import { Text, Button } from '../../atoms';
|
||||
import { Tray } from '@manacore/shared-icons';
|
||||
|
||||
type EmptyStateVariant = 'default' | 'compact' | 'centered';
|
||||
|
||||
|
|
@ -86,20 +87,7 @@
|
|||
{:else}
|
||||
<!-- Default icon -->
|
||||
<div class="empty-state__icon mb-4 text-theme-secondary opacity-50">
|
||||
<svg
|
||||
class="w-12 h-12"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
|
||||
/>
|
||||
</svg>
|
||||
<Tray size={48} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { onMount } from 'svelte';
|
||||
import type { Snippet } from 'svelte';
|
||||
import { Text } from '../../atoms';
|
||||
import { Pause, Play, SkipBack, SkipForward } from '@manacore/shared-icons';
|
||||
|
||||
interface Props {
|
||||
/** Audio source URL */
|
||||
|
|
@ -130,14 +131,7 @@
|
|||
{#if skipBackIcon}
|
||||
{@render skipBackIcon()}
|
||||
{:else}
|
||||
<svg class="h-6 w-6 text-theme" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0019 16V8a1 1 0 00-1.6-.8l-5.333 4zM4.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0011 16V8a1 1 0 00-1.6-.8l-5.334 4z"
|
||||
/>
|
||||
</svg>
|
||||
<SkipForward size={20} class="text-theme" />
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
|
|
@ -163,16 +157,12 @@
|
|||
{#if pauseIcon}
|
||||
{@render pauseIcon()}
|
||||
{:else}
|
||||
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
|
||||
</svg>
|
||||
<Pause size={20} weight="fill" />
|
||||
{/if}
|
||||
{:else if playIcon}
|
||||
{@render playIcon()}
|
||||
{:else}
|
||||
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
<Play size={20} weight="fill" />
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
|
|
@ -187,14 +177,7 @@
|
|||
{#if skipForwardIcon}
|
||||
{@render skipForwardIcon()}
|
||||
{:else}
|
||||
<svg class="h-6 w-6 text-theme" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M11.933 12.8a1 1 0 000-1.6L6.6 7.2A1 1 0 005 8v8a1 1 0 001.6.8l5.333-4zM19.933 12.8a1 1 0 000-1.6l-5.333-4A1 1 0 0013 8v8a1 1 0 001.6.8l5.333-4z"
|
||||
/>
|
||||
</svg>
|
||||
<SkipBack size={20} class="text-theme" />
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<script lang="ts">
|
||||
import { X } from '@manacore/shared-icons';
|
||||
|
||||
/**
|
||||
* Generic tag badge component
|
||||
* Displays a colored badge with optional remove button
|
||||
|
|
@ -76,14 +78,7 @@
|
|||
type="button"
|
||||
aria-label="Remove tag"
|
||||
>
|
||||
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
<X size={20} />
|
||||
</button>
|
||||
{/if}
|
||||
</span>
|
||||
|
|
@ -104,14 +99,7 @@
|
|||
type="button"
|
||||
aria-label="Remove tag"
|
||||
>
|
||||
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
<X size={20} />
|
||||
</button>
|
||||
{/if}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { PencilSimple, Trash } from '@manacore/shared-icons';
|
||||
import { PencilSimple, Tag, Trash } from '@manacore/shared-icons';
|
||||
import { DEFAULT_TAG_COLOR } from './constants';
|
||||
import type { Tag } from './constants';
|
||||
|
||||
|
|
@ -66,14 +66,7 @@
|
|||
<div
|
||||
class="w-16 h-16 mb-4 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center"
|
||||
>
|
||||
<svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
|
||||
></path>
|
||||
</svg>
|
||||
<Tag size={32} class="text-gray-400" />
|
||||
</div>
|
||||
<h3 class="text-lg font-medium text-foreground mb-1">{emptyMessage}</h3>
|
||||
<p class="text-sm text-muted-foreground">{emptyDescription}</p>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import type { Snippet } from 'svelte';
|
||||
import type { NavItem } from './types';
|
||||
import NavLink from './NavLink.svelte';
|
||||
import { List, X } from '@manacore/shared-icons';
|
||||
|
||||
interface Props {
|
||||
/** Navigation items to display */
|
||||
|
|
@ -90,23 +91,9 @@
|
|||
aria-label="Toggle menu"
|
||||
>
|
||||
{#if mobileMenuOpen}
|
||||
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
<X size={24} />
|
||||
{:else}
|
||||
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
</svg>
|
||||
<List size={24} />
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
import type { PillDropdownItem } from './types';
|
||||
import { Columns } from '@manacore/shared-icons';
|
||||
|
||||
interface Props {
|
||||
items: PillDropdownItem[];
|
||||
|
|
@ -258,14 +259,7 @@
|
|||
class="split-button glass-pill"
|
||||
title="Open in split panel (Ctrl/Cmd+Click)"
|
||||
>
|
||||
<svg class="split-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 4H5a1 1 0 00-1 1v14a1 1 0 001 1h4a1 1 0 001-1V5a1 1 0 00-1-1zM19 4h-4a1 1 0 00-1 1v14a1 1 0 001 1h4a1 1 0 001-1V5a1 1 0 00-1-1z"
|
||||
/>
|
||||
</svg>
|
||||
<Columns size={20} class="split-icon" />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,63 +13,63 @@
|
|||
import PillTagSelector from './PillTagSelector.svelte';
|
||||
// Phosphor Icons (via shared-icons)
|
||||
import {
|
||||
House,
|
||||
Users,
|
||||
Tag,
|
||||
Heart,
|
||||
Gear,
|
||||
ChatCircle,
|
||||
Question,
|
||||
ShareNetwork,
|
||||
Archive,
|
||||
Bell,
|
||||
Clock,
|
||||
Timer,
|
||||
Target,
|
||||
Globe,
|
||||
Tray,
|
||||
Buildings,
|
||||
CalendarBlank,
|
||||
CaretDown,
|
||||
CaretLeft,
|
||||
CaretRight,
|
||||
CaretUp,
|
||||
ChartBar,
|
||||
ChatCircle,
|
||||
Check,
|
||||
CheckCircle,
|
||||
CheckSquare,
|
||||
Plus,
|
||||
Clock,
|
||||
Columns,
|
||||
Microphone,
|
||||
CalendarBlank,
|
||||
Folder,
|
||||
Archive,
|
||||
Upload,
|
||||
MusicNote,
|
||||
File,
|
||||
ChartBar,
|
||||
MagnifyingGlass,
|
||||
List,
|
||||
Compass,
|
||||
Moon,
|
||||
Sun,
|
||||
SignOut,
|
||||
CaretDown,
|
||||
CaretUp,
|
||||
CaretLeft,
|
||||
Fire,
|
||||
GridFour,
|
||||
Palette,
|
||||
CreditCard,
|
||||
Buildings,
|
||||
User,
|
||||
Scales,
|
||||
Robot,
|
||||
Key,
|
||||
Shield,
|
||||
Gift,
|
||||
MusicNotes,
|
||||
Playlist,
|
||||
Waveform,
|
||||
File,
|
||||
FileText,
|
||||
Fire,
|
||||
Folder,
|
||||
Funnel,
|
||||
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,
|
||||
ShareFat,
|
||||
Sun,
|
||||
Tag,
|
||||
Target,
|
||||
Timer,
|
||||
Trash,
|
||||
Funnel,
|
||||
CaretRight,
|
||||
Tray,
|
||||
Upload,
|
||||
User,
|
||||
Users,
|
||||
Waveform,
|
||||
} from '@manacore/shared-icons';
|
||||
|
||||
// Map icon names to Phosphor components
|
||||
|
|
@ -593,16 +593,7 @@
|
|||
title="Hoher Kontrast"
|
||||
aria-pressed={a11yContrast === 'high'}
|
||||
>
|
||||
<svg
|
||||
class="a11y-icon"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 2v20M12 2a10 10 0 0 1 0 20" fill="currentColor" />
|
||||
</svg>
|
||||
<Sun size={20} class="a11y-icon" />
|
||||
</button>
|
||||
<!-- Reduce Motion Toggle -->
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<script lang="ts">
|
||||
import { CaretDown, Clock } from '@manacore/shared-icons';
|
||||
|
||||
// Portal action - moves element to body to escape stacking contexts
|
||||
function portal(node: HTMLElement) {
|
||||
document.body.appendChild(node);
|
||||
|
|
@ -155,27 +157,12 @@
|
|||
class:active={toggleMode && active}
|
||||
title={toggleMode ? 'Klick: Ein/Aus | Rechtsklick: Zeitbereich' : 'Zeitbereich auswählen'}
|
||||
>
|
||||
<svg class="pill-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<Clock size={20} class="pill-icon" />
|
||||
{#if label}
|
||||
<span class="pill-label">{label}</span>
|
||||
{/if}
|
||||
{#if !toggleMode}
|
||||
<svg
|
||||
class="chevron-icon"
|
||||
class:rotated={isOpen}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
<CaretDown size={20} class="chevron-icon" />
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import type { Snippet } from 'svelte';
|
||||
import type { NavItem } from './types';
|
||||
import NavLink from './NavLink.svelte';
|
||||
import { CaretLeft, List, Moon, SignOut, Sun } from '@manacore/shared-icons';
|
||||
|
||||
interface Props {
|
||||
/** Navigation items to display */
|
||||
|
|
@ -108,24 +109,10 @@
|
|||
>
|
||||
{#if isDark}
|
||||
<!-- Sun icon -->
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
|
||||
/>
|
||||
</svg>
|
||||
<Sun size={20} />
|
||||
{:else}
|
||||
<!-- Moon icon -->
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
|
||||
/>
|
||||
</svg>
|
||||
<Moon size={20} />
|
||||
{/if}
|
||||
{#if !minimized}
|
||||
<span>{isDark ? lightModeLabel : darkModeLabel}</span>
|
||||
|
|
@ -145,14 +132,7 @@
|
|||
class="sidebar__action sidebar__action--danger"
|
||||
title={signOutLabel}
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
|
||||
/>
|
||||
</svg>
|
||||
<SignOut size={20} />
|
||||
{#if !minimized}
|
||||
<span>{signOutLabel}</span>
|
||||
{/if}
|
||||
|
|
@ -168,24 +148,10 @@
|
|||
>
|
||||
{#if minimized}
|
||||
<!-- Menu icon (expand) -->
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
</svg>
|
||||
<List size={20} />
|
||||
{:else}
|
||||
<!-- Chevron left (minimize) -->
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 19l-7-7 7-7"
|
||||
/>
|
||||
</svg>
|
||||
<CaretLeft size={20} />
|
||||
<span>{minimizeLabel}</span>
|
||||
{/if}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
import type { NavItem } from './types';
|
||||
import NavLink from './NavLink.svelte';
|
||||
import { Text } from '../atoms';
|
||||
import { CaretDown } from '@manacore/shared-icons';
|
||||
|
||||
interface Props {
|
||||
/** Section title (hidden when minimized) */
|
||||
|
|
@ -82,19 +83,10 @@
|
|||
<Text variant="small" class="text-theme-tertiary uppercase tracking-wider">
|
||||
{title}
|
||||
</Text>
|
||||
<svg
|
||||
class="w-3 h-3 text-theme-tertiary transition-transform {expanded ? '' : '-rotate-90'}"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
<CaretDown
|
||||
size={14}
|
||||
class="text-theme-tertiary transition-transform {expanded ? '' : '-rotate-90'}"
|
||||
/>
|
||||
</button>
|
||||
{:else}
|
||||
<div class="px-3 py-1.5">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { slide } from 'svelte/transition';
|
||||
import type { Snippet } from 'svelte';
|
||||
import { SlidersHorizontal } from '@manacore/shared-icons';
|
||||
|
||||
interface Props {
|
||||
/** Whether the toolbar is collapsed */
|
||||
|
|
@ -64,26 +65,7 @@
|
|||
class:active={!isCollapsed}
|
||||
title={isCollapsed ? collapsedTitle : expandedTitle}
|
||||
>
|
||||
<svg class="fab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
{#if isCollapsed}
|
||||
{#if collapsedIcon}
|
||||
{@render collapsedIcon()}
|
||||
{:else}
|
||||
<!-- Default settings/sliders icon -->
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
|
||||
/>
|
||||
{/if}
|
||||
{:else if expandedIcon}
|
||||
{@render expandedIcon()}
|
||||
{:else}
|
||||
<!-- Default chevron down icon -->
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
{/if}
|
||||
</svg>
|
||||
<SlidersHorizontal size={20} class="fab-icon" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { House } from '@manacore/shared-icons';
|
||||
|
||||
interface Props {
|
||||
appName: string;
|
||||
|
|
@ -83,14 +84,7 @@
|
|||
e.currentTarget.style.filter = '';
|
||||
}}
|
||||
>
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
|
||||
/>
|
||||
</svg>
|
||||
<House size={20} class="mr-2" />
|
||||
Zur Startseite
|
||||
</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -30,6 +30,14 @@
|
|||
}
|
||||
|
||||
import type { Snippet } from 'svelte';
|
||||
import {
|
||||
ArrowRight,
|
||||
Check,
|
||||
CheckSquare,
|
||||
Heart,
|
||||
MagnifyingGlass,
|
||||
Plus,
|
||||
} from '@manacore/shared-icons';
|
||||
|
||||
interface Props {
|
||||
onSearch: (query: string) => Promise<QuickInputItem[]>;
|
||||
|
|
@ -394,14 +402,7 @@
|
|||
{#if creating}
|
||||
<div class="loading-spinner-small"></div>
|
||||
{:else}
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 4v16m8-8H4"
|
||||
/>
|
||||
</svg>
|
||||
<Plus size={20} />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="result-info">
|
||||
|
|
@ -424,14 +425,7 @@
|
|||
onmouseenter={() => (selectedIndex = searchOptionIndex)}
|
||||
>
|
||||
<div class="result-avatar search-avatar">
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||
/>
|
||||
</svg>
|
||||
<MagnifyingGlass size={20} />
|
||||
</div>
|
||||
<div class="result-info">
|
||||
<div class="result-name">"{searchQuery}" {searchText.toLowerCase()}</div>
|
||||
|
|
@ -474,11 +468,7 @@
|
|||
{/if}
|
||||
</div>
|
||||
{#if item.isFavorite}
|
||||
<svg class="favorite-icon" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
|
||||
/>
|
||||
</svg>
|
||||
<Heart size={20} weight="fill" class="favorite-icon" />
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
|
|
@ -504,47 +494,9 @@
|
|||
<div class="app-icon" class:success-icon={createSuccess}>
|
||||
{#if createSuccess}
|
||||
<!-- Checkmark icon -->
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2.5"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
<Check size={20} />
|
||||
{:else}
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
{#if appIcon === 'check-square' || appIcon === 'todo'}
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
|
||||
/>
|
||||
{:else if appIcon === 'calendar'}
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
/>
|
||||
{:else if appIcon === 'users' || appIcon === 'contacts'}
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
|
||||
/>
|
||||
{:else}
|
||||
<!-- Default search icon -->
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||
/>
|
||||
{/if}
|
||||
</svg>
|
||||
<CheckSquare size={20} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
|
@ -578,14 +530,7 @@
|
|||
{#if creating}
|
||||
<div class="loading-spinner-small"></div>
|
||||
{:else}
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M14 5l7 7m0 0l-7 7m7-7H3"
|
||||
/>
|
||||
</svg>
|
||||
<ArrowRight size={20} />
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
import SettingsSection from './SettingsSection.svelte';
|
||||
import SettingsCard from './SettingsCard.svelte';
|
||||
import NavVisibilitySettings from './NavVisibilitySettings.svelte';
|
||||
import { Gear } from '@manacore/shared-icons';
|
||||
|
||||
interface NavItem {
|
||||
href: string;
|
||||
|
|
@ -112,20 +113,7 @@
|
|||
|
||||
<SettingsSection {title}>
|
||||
{#snippet icon()}
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
<Gear size={20} />
|
||||
{/snippet}
|
||||
|
||||
<SettingsCard>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
import { CaretRight } from '@manacore/shared-icons';
|
||||
|
||||
interface Props {
|
||||
/** Row label */
|
||||
|
|
@ -79,14 +80,7 @@
|
|||
{#if children}
|
||||
{@render children()}
|
||||
{:else}
|
||||
<svg
|
||||
class="w-5 h-5 text-gray-400 dark:text-gray-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
<CaretRight size={20} class="text-gray-400 dark:text-gray-500" />
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -116,14 +110,7 @@
|
|||
{#if children}
|
||||
{@render children()}
|
||||
{:else}
|
||||
<svg
|
||||
class="w-5 h-5 text-gray-400 dark:text-gray-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
<CaretRight size={20} class="text-gray-400 dark:text-gray-500" />
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
import { X } from '@manacore/shared-icons';
|
||||
|
||||
interface Props {
|
||||
/** Row label */
|
||||
|
|
@ -108,20 +109,7 @@
|
|||
aria-label="Clear time"
|
||||
{disabled}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M18 6 6 18" />
|
||||
<path d="m6 6 12 12" />
|
||||
</svg>
|
||||
<X size={20} />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue