♻️ refactor: migrate all web apps to Phosphor icons

Replace lucide-svelte with @manacore/shared-icons across all web apps
for consistent icon usage throughout the monorepo.

Apps migrated:
- calendar (12 files)
- contacts (1 file)
- matrix (16 files)
- nutriphi (7 files)
- presi (6 files)
- questions (9 files)
- skilltree (9 files)
- storage (16 files)
- todo (package.json only)

Key icon mappings:
- Trash2 → Trash
- ChevronLeft/Right/Up/Down → CaretLeft/Right/Up/Down
- Search → MagnifyingGlass
- Settings → Gear
- Loader2 → CircleNotch
- AlertCircle → WarningCircle
- ExternalLink → ArrowSquareOut
- LogOut → SignOut

apps/questions/apps/web/package.json

@@ -41,7 +41,6 @@
 		"@manacore/shared-theme-ui": "workspace:*",
 		"@manacore/shared-ui": "workspace:*",
 		"date-fns": "^4.1.0",
-		"lucide-svelte": "^0.556.0",
 		"svelte-i18n": "^4.0.1"
 	},
 	"type": "module"

apps/questions/apps/web/src/lib/components/CollectionModal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { X } from 'lucide-svelte';
+	import { X } from '@manacore/shared-icons';
 	import { collectionsStore } from '$lib/stores';
 	import type { Collection, CreateCollectionDto, UpdateCollectionDto } from '$lib/types';
 

apps/questions/apps/web/src/lib/components/ErrorAlert.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AlertCircle, X, RefreshCw } from 'lucide-svelte';
+	import { WarningCircle, X, ArrowsClockwise } from '@manacore/shared-icons';
 
 	interface Props {
 		message: string;
@@ -14,7 +14,7 @@
 	class="flex items-start gap-3 rounded-lg border border-destructive/20 bg-destructive/10 p-4"
 	role="alert"
 >
-	<AlertCircle class="mt-0.5 h-5 w-5 flex-shrink-0 text-destructive" />
+	<WarningCircle class="mt-0.5 h-5 w-5 flex-shrink-0 text-destructive" />
 
 	<div class="flex-1">
 		<p class="text-sm font-medium text-destructive">Error</p>
@@ -25,7 +25,7 @@
 				onclick={onRetry}
 				class="mt-2 inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline"
 			>
-				<RefreshCw class="h-4 w-4" />
+				<ArrowsClockwise class="h-4 w-4" />
 				Try again
 			</button>
 		{/if}

apps/questions/apps/web/src/routes/(app)/+layout.svelte

@@ -4,16 +4,16 @@
 	import { authStore, collectionsStore, questionsStore } from '$lib/stores';
 	import { apiClient } from '$lib/api/client';
 	import {
-		Search,
+		MagnifyingGlass,
 		Plus,
 		FolderOpen,
-		Settings,
-		LogOut,
+		Gear,
+		SignOut,
 		Moon,
 		Sun,
-		HelpCircle,
-		ChevronRight,
-	} from 'lucide-svelte';
+		Question,
+		CaretRight,
+	} from '@manacore/shared-icons';
 	import { theme } from '$lib/stores/theme';
 
 	let { children } = $props();
@@ -65,7 +65,7 @@
 				onclick={() => (sidebarOpen = !sidebarOpen)}
 				class="rounded-lg p-2 text-muted-foreground hover:bg-secondary"
 			>
-				<ChevronRight class="h-5 w-5 transition-transform" class:rotate-180={sidebarOpen} />
+				<CaretRight class="h-5 w-5 transition-transform" class:rotate-180={sidebarOpen} />
 			</button>
 		</div>
 
@@ -89,7 +89,7 @@
 				class="collection-item flex w-full items-center gap-3 rounded-lg px-3 py-2 text-foreground"
 				class:active={!collectionsStore.selectedId}
 			>
-				<HelpCircle class="h-5 w-5" />
+				<Question class="h-5 w-5" />
 				{#if sidebarOpen}
 					<span>All Questions</span>
 					<span class="ml-auto text-xs text-muted-foreground">{questionsStore.total}</span>
@@ -111,7 +111,8 @@
 					<FolderOpen class="h-5 w-5" style="color: {collection.color}" />
 					{#if sidebarOpen}
 						<span class="truncate">{collection.name}</span>
-						<span class="ml-auto text-xs text-muted-foreground">{collection.questionCount || 0}</span
+						<span class="ml-auto text-xs text-muted-foreground"
+							>{collection.questionCount || 0}</span
 						>
 					{/if}
 				</button>
@@ -148,7 +149,7 @@
 				href="/settings"
 				class="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground hover:bg-secondary hover:text-foreground"
 			>
-				<Settings class="h-5 w-5" />
+				<Gear class="h-5 w-5" />
 				{#if sidebarOpen}
 					<span>Settings</span>
 				{/if}
@@ -158,7 +159,7 @@
 				onclick={handleSignOut}
 				class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground hover:bg-secondary hover:text-foreground"
 			>
-				<LogOut class="h-5 w-5" />
+				<SignOut class="h-5 w-5" />
 				{#if sidebarOpen}
 					<span>Sign Out</span>
 				{/if}

apps/questions/apps/web/src/routes/(app)/+page.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
 	import { questionsStore, collectionsStore } from '$lib/stores';
 	import { QuestionSkeleton, ErrorAlert } from '$lib/components';
-	import { Search, Filter, Clock, CheckCircle, Loader2, Archive } from 'lucide-svelte';
+	import {
+		MagnifyingGlass,
+		Funnel,
+		Clock,
+		CheckCircle,
+		CircleNotch,
+		Archive,
+	} from '@manacore/shared-icons';
 	import type { QuestionStatus, ResearchDepth } from '$lib/types';
 
 	let searchQuery = $state('');
@@ -9,7 +16,7 @@
 
 	const statusIcons = {
 		open: { icon: Clock, color: 'text-gray-500' },
-		researching: { icon: Loader2, color: 'text-blue-500' },
+		researching: { icon: CircleNotch, color: 'text-blue-500' },
 		answered: { icon: CheckCircle, color: 'text-green-500' },
 		archived: { icon: Archive, color: 'text-gray-400' },
 	};
@@ -60,7 +67,9 @@
 	<!-- Search and Filters -->
 	<div class="mb-6 flex gap-4">
 		<div class="relative flex-1">
-			<Search class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" />
+			<MagnifyingGlass
+				class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground"
+			/>
 			<input
 				type="text"
 				bind:value={searchQuery}
@@ -86,7 +95,7 @@
 			onclick={handleSearch}
 			class="flex items-center gap-2 rounded-lg bg-secondary px-4 py-2 text-foreground hover:bg-secondary-hover"
 		>
-			<Filter class="h-5 w-5" />
+			<Funnel class="h-5 w-5" />
 			<span>Filter</span>
 		</button>
 	</div>

apps/questions/apps/web/src/routes/(app)/collections/+page.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
 	import { collectionsStore } from '$lib/stores';
 	import CollectionModal from '$lib/components/CollectionModal.svelte';
-	import { ArrowLeft, Plus, Edit2, Trash2, FolderOpen, GripVertical } from 'lucide-svelte';
+	import {
+		ArrowLeft,
+		Plus,
+		PencilSimple,
+		Trash,
+		FolderOpen,
+		DotsSixVertical,
+	} from '@manacore/shared-icons';
 	import type { Collection } from '$lib/types';
 
 	let showModal = $state(false);
@@ -47,9 +54,7 @@
 				Back to questions
 			</a>
 			<h1 class="text-2xl font-bold text-foreground">Collections</h1>
-			<p class="mt-1 text-muted-foreground">
-				Organize your questions into collections
-			</p>
+			<p class="mt-1 text-muted-foreground">Organize your questions into collections</p>
 		</div>
 		<button
 			onclick={openCreateModal}
@@ -84,7 +89,7 @@
 				>
 					<!-- Drag Handle -->
 					<div class="cursor-grab text-muted-foreground">
-						<GripVertical class="h-5 w-5" />
+						<DotsSixVertical class="h-5 w-5" />
 					</div>
 
 					<!-- Icon & Color -->
@@ -122,7 +127,7 @@
 							class="rounded-lg p-2 text-muted-foreground hover:bg-secondary hover:text-foreground"
 							title="Edit"
 						>
-							<Edit2 class="h-4 w-4" />
+							<PencilSimple class="h-4 w-4" />
 						</button>
 
 						{#if deleteConfirm === collection.id}
@@ -146,7 +151,7 @@
 								class="rounded-lg p-2 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
 								title="Delete"
 							>
-								<Trash2 class="h-4 w-4" />
+								<Trash class="h-4 w-4" />
 							</button>
 						{/if}
 					</div>

apps/questions/apps/web/src/routes/(app)/new/+page.svelte

@@ -2,7 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { questionsStore, collectionsStore } from '$lib/stores';
 	import { researchApi } from '$lib/api/research';
-	import { ArrowLeft, Zap, Clock, Sparkles } from 'lucide-svelte';
+	import { ArrowLeft, Lightning, Clock, Sparkle } from '@manacore/shared-icons';
 	import type { ResearchDepth, QuestionPriority } from '$lib/types';
 
 	let title = $state('');
@@ -17,10 +17,15 @@
 	let loading = $state(false);
 	let error = $state<string | null>(null);
 
-	const depthOptions: { value: ResearchDepth; label: string; description: string; icon: typeof Zap }[] = [
-		{ value: 'quick', label: 'Quick', description: '5 sources, fast results', icon: Zap },
+	const depthOptions: {
+		value: ResearchDepth;
+		label: string;
+		description: string;
+		icon: typeof Lightning;
+	}[] = [
+		{ value: 'quick', label: 'Quick', description: '5 sources, fast results', icon: Lightning },
 		{ value: 'standard', label: 'Standard', description: '15 sources, balanced', icon: Clock },
-		{ value: 'deep', label: 'Deep', description: '30+ sources, comprehensive', icon: Sparkles },
+		{ value: 'deep', label: 'Deep', description: '30+ sources, comprehensive', icon: Sparkle },
 	];
 
 	function addTag() {
@@ -79,9 +84,7 @@
 			Back to questions
 		</a>
 		<h1 class="text-2xl font-bold text-foreground">Ask a Question</h1>
-		<p class="mt-1 text-muted-foreground">
-			Enter your question and let AI research it for you
-		</p>
+		<p class="mt-1 text-muted-foreground">Enter your question and let AI research it for you</p>
 	</div>
 
 	<form onsubmit={handleSubmit} class="space-y-6">

apps/questions/apps/web/src/routes/(app)/question/[id]/+page.svelte

@@ -8,14 +8,14 @@
 	import {
 		ArrowLeft,
 		Clock,
-		Loader2,
+		CircleNotch,
 		CheckCircle,
 		Archive,
 		Play,
-		ExternalLink,
-		ChevronDown,
-		ChevronUp,
-	} from 'lucide-svelte';
+		ArrowSquareOut,
+		CaretDown,
+		CaretUp,
+	} from '@manacore/shared-icons';
 	import type { Question, ResearchResult, Source } from '$lib/types';
 
 	let question = $state<Question | null>(null);
@@ -103,7 +103,7 @@
 		<ErrorAlert message={error} onRetry={loadQuestion} />
 	</div>
 {:else if question}
-<div class="p-6">
+	<div class="p-6">
 		<!-- Header -->
 		<div class="mb-6">
 			<a
@@ -160,7 +160,7 @@
 							class="flex items-center gap-2 rounded-lg bg-primary px-4 py-2 font-medium text-primary-foreground hover:bg-primary-hover disabled:opacity-50"
 						>
 							{#if researchLoading}
-								<Loader2 class="h-5 w-5 animate-spin" />
+								<CircleNotch class="h-5 w-5 animate-spin" />
 								Researching...
 							{:else}
 								<Play class="h-5 w-5" />
@@ -252,7 +252,7 @@
 										>
 											{source.title}
 										</a>
-										<ExternalLink class="h-4 w-4 text-muted-foreground" />
+										<ArrowSquareOut class="h-4 w-4 text-muted-foreground" />
 									</div>
 
 									<p class="mt-1 text-sm text-muted-foreground">{source.domain}</p>
@@ -299,9 +299,9 @@
 										class="rounded-lg p-2 text-muted-foreground hover:bg-secondary hover:text-foreground"
 									>
 										{#if expandedSources.has(source.id)}
-											<ChevronUp class="h-5 w-5" />
+											<CaretUp class="h-5 w-5" />
 										{:else}
-											<ChevronDown class="h-5 w-5" />
+											<CaretDown class="h-5 w-5" />
 										{/if}
 									</button>
 								{/if}
@@ -311,5 +311,5 @@
 				</div>
 			</div>
 		{/if}
-</div>
+	</div>
 {/if}

apps/questions/apps/web/src/routes/(app)/settings/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { theme } from '$lib/stores/theme';
-	import { ArrowLeft, User, Moon, Sun, Monitor, Bell, Shield, Trash2 } from 'lucide-svelte';
+	import { ArrowLeft, User, Moon, Sun, Desktop, Bell, Shield, Trash } from '@manacore/shared-icons';
 
 	let currentTheme = $state(theme.current);
 	let deleteConfirm = $state(false);
@@ -14,7 +14,7 @@
 	const themeOptions = [
 		{ value: 'light', label: 'Light', icon: Sun },
 		{ value: 'dark', label: 'Dark', icon: Moon },
-		{ value: 'system', label: 'System', icon: Monitor },
+		{ value: 'system', label: 'System', icon: Desktop },
 	] as const;
 </script>
 
@@ -156,7 +156,7 @@
 							onclick={() => (deleteConfirm = true)}
 							class="flex items-center gap-2 rounded-lg border border-destructive px-4 py-2 text-sm font-medium text-destructive hover:bg-destructive/10"
 						>
-							<Trash2 class="h-4 w-4" />
+							<Trash class="h-4 w-4" />
 							Delete Account
 						</button>
 					{/if}

apps/questions/apps/web/src/routes/(auth)/forgot-password/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { authStore } from '$lib/stores/auth.svelte';
-	import { ArrowLeft } from 'lucide-svelte';
+	import { ArrowLeft } from '@manacore/shared-icons';
 
 	let email = $state('');
 	let error = $state<string | null>(null);