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

refactor(shared-ui): replace remaining inline SVGs with Phosphor icons

Browse source 
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 2026-03-31 12:44:50 +02:00
parent 25e39620ec
commit 47f981fbc4
21 changed files with 122 additions and 480 deletions
Download patch file Download diff file Expand all files Collapse all files

19
packages/shared-ui/src/navigation/Navbar.svelte
View file

@ -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>

10
packages/shared-ui/src/navigation/PillDropdown.svelte
View file

@ -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>

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

@ -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

21
packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte
View file

@ -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>

46
packages/shared-ui/src/navigation/Sidebar.svelte
View file

@ -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>

18
packages/shared-ui/src/navigation/SidebarSection.svelte
View file

@ -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">

22
packages/shared-ui/src/navigation/expandable-toolbar/ExpandableToolbar.svelte
View file

@ -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>