From fb7c78868b3bf5313bd98c66bc0048782748352e Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Tue, 9 Dec 2025 20:40:44 +0100
Subject: [PATCH] feat(ui): add Phosphor Icons to PillNavigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace SVG path icons with Phosphor Icons via @manacore/shared-icons
- Add icon mapping for all navigation icons (help-circle, share-2, etc.)
- Update help page design with glass-morphism styling
- Icons now render consistently across all navigation items

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../web/src/routes/(app)/help/+page.svelte    | 290 ++++++++++--------
 .../src/navigation/PillNavigation.svelte      | 133 ++++++--
 2 files changed, 275 insertions(+), 148 deletions(-)

diff --git a/apps/contacts/apps/web/src/routes/(app)/help/+page.svelte b/apps/contacts/apps/web/src/routes/(app)/help/+page.svelte
index 2303da0f2..82aa1c5e5 100644
--- a/apps/contacts/apps/web/src/routes/(app)/help/+page.svelte
+++ b/apps/contacts/apps/web/src/routes/(app)/help/+page.svelte
@@ -1,6 +1,22 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { locale, _ } from 'svelte-i18n';
+	import { locale } from 'svelte-i18n';
+	import {
+		Question,
+		Star,
+		Command,
+		Envelope,
+		MagnifyingGlass,
+		CaretDown,
+		Check,
+		Info,
+		ChatCircle,
+		Clock,
+		ArrowRight,
+		ArrowLeft,
+		ArrowSquareOut,
+		BookOpen,
+	} from '@manacore/shared-icons';
 
 	type HelpSection = 'faq' | 'features' | 'shortcuts' | 'contact';
 
@@ -219,12 +235,10 @@
 	<div class="mb-8">
 		<button
 			type="button"
-			class="mb-4 flex items-center gap-1 text-sm text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
+			class="mb-4 inline-flex items-center gap-1.5 rounded-full bg-white/80 px-3 py-1.5 text-sm font-medium text-gray-600 shadow-sm ring-1 ring-gray-200 backdrop-blur-sm transition-all hover:-translate-y-0.5 hover:bg-white hover:text-gray-900 hover:shadow-md dark:bg-white/10 dark:text-gray-400 dark:ring-white/10 dark:hover:bg-white/20 dark:hover:text-gray-100"
 			onclick={handleBack}
 		>
-			<svg class="h-4 w-4" 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>
+			<ArrowLeft size={14} />
 			{t.back}
 		</button>
 
@@ -236,81 +250,78 @@
 		</p>
 	</div>
 
-	<!-- Search -->
+	<!-- Search - Glass Style -->
 	<div class="relative mb-8">
 		<input
 			type="text"
 			bind:value={searchQuery}
 			placeholder={t.searchPlaceholder}
-			class="w-full rounded-lg border border-gray-300 bg-white py-2.5 pl-10 pr-4 text-sm text-gray-900 placeholder-gray-500 transition-colors focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
+			class="w-full rounded-full border border-gray-200 bg-white/80 py-3 pl-11 pr-4 text-sm text-gray-900 shadow-sm backdrop-blur-sm placeholder:text-gray-500 focus:border-blue-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-400/20 dark:border-white/10 dark:bg-white/10 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus:border-blue-500/50 dark:focus:bg-white/15 dark:focus:ring-blue-500/20"
 		/>
-		<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-			<svg class="h-5 w-5 text-gray-400" 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>
+		<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
+			<MagnifyingGlass size={18} class="text-gray-400" />
 		</div>
 	</div>
 
-	<!-- Navigation Tabs -->
-	<div class="mb-6 border-b border-gray-200 dark:border-gray-700">
-		<nav class="-mb-px flex space-x-4 overflow-x-auto" aria-label="Help sections">
-			{#each sections as section (section.id)}
-				<button
-					type="button"
-					class="whitespace-nowrap border-b-2 px-1 py-3 text-sm font-medium transition-colors"
-					class:border-blue-500={activeSection === section.id}
-					class:text-blue-600={activeSection === section.id}
-					class:dark:text-blue-400={activeSection === section.id}
-					class:border-transparent={activeSection !== section.id}
-					class:text-gray-500={activeSection !== section.id}
-					class:hover:text-gray-700={activeSection !== section.id}
-					class:dark:text-gray-400={activeSection !== section.id}
-					class:dark:hover:text-gray-300={activeSection !== section.id}
-					onclick={() => (activeSection = section.id)}
-				>
-					{section.label}
-				</button>
-			{/each}
-		</nav>
+	<!-- Navigation Pills -->
+	<div class="mb-8 flex flex-wrap gap-2">
+		{#each sections as section (section.id)}
+			<button
+				type="button"
+				class="inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium shadow-sm backdrop-blur-sm transition-all hover:-translate-y-0.5 hover:shadow-md {activeSection ===
+				section.id
+					? 'bg-blue-500 text-white ring-1 ring-blue-400 dark:bg-blue-600 dark:ring-blue-500'
+					: 'bg-white/80 text-gray-700 ring-1 ring-gray-200 hover:bg-white dark:bg-white/10 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-white/20'}"
+				onclick={() => (activeSection = section.id)}
+			>
+				{#if section.id === 'faq'}
+					<Question size={16} />
+				{:else if section.id === 'features'}
+					<Star size={16} />
+				{:else if section.id === 'shortcuts'}
+					<Command size={16} />
+				{:else if section.id === 'contact'}
+					<Envelope size={16} />
+				{/if}
+				{section.label}
+			</button>
+		{/each}
 	</div>
 
 	<!-- Content -->
 	<div class="min-h-[400px]">
 		<!-- FAQ Section -->
 		{#if activeSection === 'faq'}
-			<div class="space-y-0 divide-y divide-gray-200 dark:divide-gray-700">
+			<div class="space-y-3">
 				{#each filteredFaqs as faq (faq.id)}
-					<div class="py-0">
+					<div
+						class="overflow-hidden rounded-2xl bg-white/80 shadow-sm ring-1 ring-gray-200 backdrop-blur-sm transition-all dark:bg-white/5 dark:ring-white/10 {expandedFaqId ===
+						faq.id
+							? 'ring-blue-300 dark:ring-blue-500/30'
+							: ''}"
+					>
 						<button
 							type="button"
-							class="flex w-full items-center justify-between py-4 text-left transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50"
+							class="flex w-full items-center justify-between p-4 text-left transition-colors hover:bg-gray-50/50 dark:hover:bg-white/5"
 							onclick={() => toggleFaq(faq.id)}
 						>
 							<span class="pr-4 font-medium text-gray-900 dark:text-gray-100">
 								{faq.question}
 							</span>
 							<span
-								class="flex-shrink-0 text-gray-500 transition-transform duration-200 dark:text-gray-400"
-								class:rotate-180={expandedFaqId === faq.id}
+								class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-gray-100 text-gray-500 transition-all duration-200 dark:bg-white/10 dark:text-gray-400 {expandedFaqId ===
+								faq.id
+									? 'rotate-180 bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400'
+									: ''}"
 							>
-								<svg class="h-5 w-5" 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} />
 							</span>
 						</button>
 
 						{#if expandedFaqId === faq.id}
-							<div class="pb-4 text-gray-600 dark:text-gray-300">
+							<div
+								class="border-t border-gray-100 bg-gray-50/50 px-4 py-4 text-gray-600 dark:border-white/5 dark:bg-white/5 dark:text-gray-300"
+							>
 								{faq.answer}
 							</div>
 						{/if}
@@ -318,9 +329,14 @@
 				{/each}
 
 				{#if filteredFaqs.length === 0}
-					<p class="py-8 text-center text-gray-500 dark:text-gray-400">
-						{$locale === 'de' ? 'Keine Ergebnisse gefunden' : 'No results found'}
-					</p>
+					<div
+						class="flex flex-col items-center justify-center rounded-2xl bg-white/80 py-12 shadow-sm ring-1 ring-gray-200 backdrop-blur-sm dark:bg-white/5 dark:ring-white/10"
+					>
+						<MagnifyingGlass size={32} class="mb-3 text-gray-400" />
+						<p class="text-gray-500 dark:text-gray-400">
+							{$locale === 'de' ? 'Keine Ergebnisse gefunden' : 'No results found'}
+						</p>
+					</div>
 				{/if}
 			</div>
 		{/if}
@@ -330,35 +346,31 @@
 			<div class="grid gap-4 sm:grid-cols-2">
 				{#each features as feature}
 					<div
-						class="rounded-lg border border-gray-200 bg-white p-5 transition-shadow hover:shadow-md dark:border-gray-700 dark:bg-gray-800"
+						class="group rounded-2xl bg-white/80 p-5 shadow-sm ring-1 ring-gray-200 backdrop-blur-sm transition-all hover:-translate-y-1 hover:shadow-lg dark:bg-white/5 dark:ring-white/10"
 					>
 						<div class="mb-3 flex items-center gap-3">
-							<span class="text-2xl">{feature.icon}</span>
+							<span
+								class="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-100 text-xl transition-transform group-hover:scale-110 dark:bg-blue-500/20"
+							>
+								{feature.icon}
+							</span>
 							<h3 class="font-semibold text-gray-900 dark:text-gray-100">
 								{feature.title}
 							</h3>
 						</div>
 
-						<p class="mb-3 text-sm text-gray-600 dark:text-gray-400">
+						<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
 							{feature.description}
 						</p>
 
-						<ul class="space-y-1">
+						<ul class="space-y-2">
 							{#each feature.highlights as highlight}
-								<li class="flex items-start gap-2 text-sm text-gray-600 dark:text-gray-400">
-									<svg
-										class="mt-0.5 h-4 w-4 flex-shrink-0 text-green-500"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke="currentColor"
+								<li class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+									<span
+										class="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-green-100 dark:bg-green-500/20"
 									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M5 13l4 4L19 7"
-										/>
-									</svg>
+										<Check size={12} class="text-green-600 dark:text-green-400" />
+									</span>
 									{highlight}
 								</li>
 							{/each}
@@ -370,64 +382,66 @@
 
 		<!-- Shortcuts Section -->
 		{#if activeSection === 'shortcuts'}
-			<div class="overflow-x-auto">
-				<table class="w-full text-left text-sm">
-					<thead>
-						<tr class="border-b border-gray-200 dark:border-gray-700">
-							<th class="pb-3 pr-4 font-semibold text-gray-900 dark:text-gray-100">Shortcut</th>
-							<th class="pb-3 font-semibold text-gray-900 dark:text-gray-100">
-								{$locale === 'de' ? 'Aktion' : 'Action'}
-							</th>
-						</tr>
-					</thead>
-					<tbody class="divide-y divide-gray-100 dark:divide-gray-800">
-						{#each shortcuts as shortcut}
-							<tr>
-								<td class="py-3 pr-4">
-									<kbd
-										class="rounded bg-gray-100 px-2 py-1 font-mono text-xs text-gray-800 dark:bg-gray-800 dark:text-gray-200"
-									>
-										{shortcut.shortcut}
-									</kbd>
-								</td>
-								<td class="py-3 text-gray-600 dark:text-gray-400">
-									{shortcut.action}
-								</td>
-							</tr>
-						{/each}
-					</tbody>
-				</table>
+			<div
+				class="overflow-hidden rounded-2xl bg-white/80 shadow-sm ring-1 ring-gray-200 backdrop-blur-sm dark:bg-white/5 dark:ring-white/10"
+			>
+				<div class="divide-y divide-gray-100 dark:divide-white/5">
+					{#each shortcuts as shortcut, i}
+						<div
+							class="flex items-center justify-between p-4 transition-colors hover:bg-gray-50/50 dark:hover:bg-white/5"
+						>
+							<span class="text-gray-700 dark:text-gray-300">{shortcut.action}</span>
+							<kbd
+								class="ml-4 flex-shrink-0 rounded-lg bg-gray-100 px-3 py-1.5 font-mono text-xs font-medium text-gray-700 ring-1 ring-gray-200 dark:bg-white/10 dark:text-gray-300 dark:ring-white/10"
+							>
+								{shortcut.shortcut}
+							</kbd>
+						</div>
+					{/each}
+				</div>
+			</div>
+
+			<!-- Tip -->
+			<div
+				class="mt-4 flex items-start gap-3 rounded-2xl bg-blue-50/80 p-4 ring-1 ring-blue-100 backdrop-blur-sm dark:bg-blue-500/10 dark:ring-blue-500/20"
+			>
+				<Info size={20} class="mt-0.5 flex-shrink-0 text-blue-500" />
+				<p class="text-sm text-blue-700 dark:text-blue-300">
+					{$locale === 'de'
+						? 'Tipp: Drücke Cmd/Ctrl + K, um jederzeit schnell zur Suche zu gelangen.'
+						: 'Tip: Press Cmd/Ctrl + K to quickly access search anytime.'}
+				</p>
 			</div>
 		{/if}
 
 		<!-- Contact Section -->
 		{#if activeSection === 'contact'}
 			<div class="space-y-6">
-				<div>
-					<h2 class="mb-2 text-lg font-semibold text-gray-900 dark:text-gray-100">
-						{t.contactTitle}
-					</h2>
-					<p class="text-gray-600 dark:text-gray-400">
-						{t.contactDescription}
-					</p>
+				<!-- Header Card -->
+				<div
+					class="rounded-2xl bg-gradient-to-br from-blue-500 to-blue-600 p-6 text-white shadow-lg dark:from-blue-600 dark:to-blue-700"
+				>
+					<div class="flex items-center gap-3">
+						<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-white/20">
+							<ChatCircle size={24} />
+						</div>
+						<div>
+							<h2 class="text-lg font-semibold">{t.contactTitle}</h2>
+							<p class="text-blue-100">{t.contactDescription}</p>
+						</div>
+					</div>
 				</div>
 
+				<!-- Contact Options -->
 				<div class="grid gap-4 sm:grid-cols-2">
 					<a
 						href="mailto:support@manacore.app"
-						class="flex items-center gap-3 rounded-lg border border-gray-200 p-4 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
+						class="group flex items-center gap-4 rounded-2xl bg-white/80 p-5 shadow-sm ring-1 ring-gray-200 backdrop-blur-sm transition-all hover:-translate-y-1 hover:shadow-lg dark:bg-white/5 dark:ring-white/10"
 					>
 						<div
-							class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-400"
+							class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100 text-blue-600 transition-transform group-hover:scale-110 dark:bg-blue-500/20 dark:text-blue-400"
 						>
-							<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-								/>
-							</svg>
+							<Envelope size={22} />
 						</div>
 						<div>
 							<p class="font-medium text-gray-900 dark:text-gray-100">
@@ -435,22 +449,19 @@
 							</p>
 							<p class="text-sm text-gray-600 dark:text-gray-400">support@manacore.app</p>
 						</div>
+						<ArrowRight
+							size={18}
+							class="ml-auto text-gray-400 transition-transform group-hover:translate-x-1"
+						/>
 					</a>
 
 					<div
-						class="flex items-center gap-3 rounded-lg border border-gray-200 p-4 dark:border-gray-700"
+						class="flex items-center gap-4 rounded-2xl bg-white/80 p-5 shadow-sm ring-1 ring-gray-200 backdrop-blur-sm dark:bg-white/5 dark:ring-white/10"
 					>
 						<div
-							class="flex h-10 w-10 items-center justify-center rounded-full bg-green-100 text-green-600 dark:bg-green-900 dark:text-green-400"
+							class="flex h-12 w-12 items-center justify-center rounded-xl bg-green-100 text-green-600 dark:bg-green-500/20 dark:text-green-400"
 						>
-							<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-								<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={22} />
 						</div>
 						<div>
 							<p class="font-medium text-gray-900 dark:text-gray-100">
@@ -462,6 +473,35 @@
 						</div>
 					</div>
 				</div>
+
+				<!-- Additional Info -->
+				<div
+					class="rounded-2xl bg-gray-50/80 p-5 ring-1 ring-gray-200 backdrop-blur-sm dark:bg-white/5 dark:ring-white/10"
+				>
+					<h3 class="mb-3 font-medium text-gray-900 dark:text-gray-100">
+						{$locale === 'de' ? 'Weitere Ressourcen' : 'Additional Resources'}
+					</h3>
+					<div class="space-y-2">
+						<a
+							href="https://manacore.app"
+							target="_blank"
+							rel="noopener noreferrer"
+							class="flex items-center gap-2 text-sm text-gray-600 transition-colors hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
+						>
+							<ArrowSquareOut size={14} />
+							{$locale === 'de' ? 'Website besuchen' : 'Visit Website'}
+						</a>
+						<a
+							href="https://manacore.app/docs"
+							target="_blank"
+							rel="noopener noreferrer"
+							class="flex items-center gap-2 text-sm text-gray-600 transition-colors hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
+						>
+							<BookOpen size={14} />
+							{$locale === 'de' ? 'Dokumentation' : 'Documentation'}
+						</a>
+					</div>
+				</div>
 			</div>
 		{/if}
 	</div>
diff --git a/packages/shared-ui/src/navigation/PillNavigation.svelte b/packages/shared-ui/src/navigation/PillNavigation.svelte
index 39b80b3ea..b3a41bd84 100644
--- a/packages/shared-ui/src/navigation/PillNavigation.svelte
+++ b/packages/shared-ui/src/navigation/PillNavigation.svelte
@@ -9,6 +9,98 @@
 	} from './types';
 	import PillDropdown from './PillDropdown.svelte';
 	import PillTabGroup from './PillTabGroup.svelte';
+	// Phosphor Icons (via shared-icons)
+	import {
+		House,
+		Users,
+		Tag,
+		Heart,
+		Gear,
+		ChatCircle,
+		Question,
+		ShareNetwork,
+		Bell,
+		Clock,
+		Timer,
+		Target,
+		Globe,
+		Tray,
+		Check,
+		CheckCircle,
+		Plus,
+		Columns,
+		Microphone,
+		CalendarBlank,
+		Folder,
+		Archive,
+		Upload,
+		MusicNote,
+		File,
+		ChartBar,
+		MagnifyingGlass,
+		List,
+		Compass,
+		Moon,
+		Sun,
+		SignOut,
+		CaretDown,
+		CaretUp,
+		CaretLeft,
+		Fire,
+		GridFour,
+		Palette,
+		CreditCard,
+		Buildings,
+		User,
+	} from '@manacore/shared-icons';
+
+	// Map icon names to Phosphor components
+	const phosphorIcons: Record<string, any> = {
+		home: House,
+		users: Users,
+		user: User,
+		tag: Tag,
+		heart: Heart,
+		settings: Gear,
+		chat: ChatCircle,
+		'help-circle': Question,
+		'share-2': ShareNetwork,
+		bell: Bell,
+		clock: Clock,
+		timer: Timer,
+		target: Target,
+		globe: Globe,
+		inbox: Tray,
+		check: Check,
+		checkCircle: CheckCircle,
+		plus: Plus,
+		columns: Columns,
+		kanban: Columns,
+		mic: Microphone,
+		calendar: CalendarBlank,
+		folder: Folder,
+		archive: Archive,
+		upload: Upload,
+		music: MusicNote,
+		document: File,
+		chart: ChartBar,
+		search: MagnifyingGlass,
+		list: List,
+		compass: Compass,
+		moon: Moon,
+		sun: Sun,
+		logout: SignOut,
+		chevronDown: CaretDown,
+		chevronUp: CaretUp,
+		chevronLeft: CaretLeft,
+		menu: List,
+		fire: Fire,
+		grid: GridFour,
+		gridSmall: GridFour,
+		palette: Palette,
+		creditCard: CreditCard,
+		building: Buildings,
+	};
 
 	// Convert app items to dropdown items (will be computed as derived)
 	function createAppDropdownItems(
@@ -325,6 +417,10 @@
 		palette:
 			'M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01',
 		chat: 'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z',
+		'help-circle':
+			'M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+		'share-2':
+			'M18 8a3 3 0 100-6 3 3 0 000 6zM6 15a3 3 0 100-6 3 3 0 000 6zM18 22a3 3 0 100-6 3 3 0 000 6zM8.59 13.51l6.83 3.98M15.41 6.51l-6.82 3.98',
 	};
 
 	function getIconPath(name: string): string {
@@ -368,23 +464,10 @@
 									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.icon === 'settings'}
-							<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('settings')}
-								/>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d={getIconPath('settingsInner')}
-								/>
-							</svg>
 						{:else if item.iconSvg}
 							{@html item.iconSvg}
+						{:else if phosphorIcons[item.icon]}
+							<svelte:component this={phosphorIcons[item.icon]} size={18} class="pill-icon" />
 						{:else}
 							<svg class="pill-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 								<path
@@ -416,14 +499,18 @@
 				{:else if isNavItem(element)}
 					<a href={element.href} class="pill glass-pill" class:active={isActive(element.href)}>
 						{#if element.icon}
-							<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(element.icon)}
-								/>
-							</svg>
+							{#if phosphorIcons[element.icon]}
+								<svelte:component this={phosphorIcons[element.icon]} 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(element.icon)}
+									/>
+								</svg>
+							{/if}
 						{/if}
 						<span class="pill-label">{element.label}</span>
 					</a>