♻️ 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
This commit is contained in:
Till-JS 2026-01-29 13:15:13 +01:00
parent c21f780581
commit b89749deed
86 changed files with 1736 additions and 904 deletions

View file

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

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { Camera, PenLine, Plus, X } from 'lucide-svelte';
import { Camera, PencilLine, Plus, X } from '@manacore/shared-icons';
import { goto } from '$app/navigation';
let isOpen = $state(false);
@ -43,7 +43,7 @@
onclick={handleText}
class="flex items-center gap-3 px-5 py-3 bg-[var(--color-background-card)] border border-[var(--color-border)] rounded-full shadow-lg hover:bg-[var(--color-background-elevated)] transition-all"
>
<PenLine class="w-5 h-5 text-[var(--color-secondary)]" />
<PencilLine class="w-5 h-5 text-[var(--color-secondary)]" />
<span class="text-[var(--color-text-primary)] font-medium">Text</span>
</button>
</div>

View file

@ -2,7 +2,7 @@
import { mealsStore } from '$lib/stores/meals.svelte';
import { onMount } from 'svelte';
import ProgressRing from './ProgressRing.svelte';
import { AlertCircle, RefreshCw } from 'lucide-svelte';
import { WarningCircle, ArrowsClockwise } from '@manacore/shared-icons';
onMount(() => {
mealsStore.fetchDailySummary();
@ -30,10 +30,10 @@
<div
class="bg-red-500/10 border border-red-500/20 rounded-xl p-3 flex items-center gap-2 text-red-400 text-sm"
>
<AlertCircle class="w-4 h-4 flex-shrink-0" />
<WarningCircle class="w-4 h-4 flex-shrink-0" />
<span class="flex-1">{mealsStore.summaryError}</span>
<button onclick={retry} class="p-1 hover:bg-red-500/20 rounded transition-colors">
<RefreshCw class="w-4 h-4" />
<ArrowsClockwise class="w-4 h-4" />
</button>
</div>
{:else if mealsStore.summaryLoading}

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { Settings } from 'lucide-svelte';
import { Gear } from '@manacore/shared-icons';
</script>
<header
@ -19,7 +19,7 @@
class="p-2 rounded-lg hover:bg-[var(--color-background-card)] transition-colors"
title="Einstellungen"
>
<Settings class="w-5 h-5 text-[var(--color-text-secondary)]" />
<Gear class="w-5 h-5 text-[var(--color-text-secondary)]" />
</a>
</div>
</div>

View file

@ -2,7 +2,14 @@
import { mealsStore } from '$lib/stores/meals.svelte';
import { onMount } from 'svelte';
import { MEAL_TYPE_LABELS } from '@nutriphi/shared';
import { Trash2, Camera, PenLine, AlertCircle, RefreshCw, Loader2 } from 'lucide-svelte';
import {
Trash,
Camera,
PencilLine,
WarningCircle,
ArrowsClockwise,
CircleNotch,
} from '@manacore/shared-icons';
let deleting = $state<string | null>(null);
@ -34,10 +41,10 @@
<div
class="bg-red-500/10 border border-red-500/20 rounded-xl p-4 flex items-center gap-3 text-red-400"
>
<AlertCircle class="w-5 h-5 flex-shrink-0" />
<WarningCircle class="w-5 h-5 flex-shrink-0" />
<span class="flex-1 text-sm">{mealsStore.error}</span>
<button onclick={retry} class="p-2 hover:bg-red-500/20 rounded-lg transition-colors">
<RefreshCw class="w-4 h-4" />
<ArrowsClockwise class="w-4 h-4" />
</button>
</div>
{/if}
@ -46,7 +53,7 @@
<div
class="bg-red-500/10 border border-red-500/20 rounded-xl p-3 flex items-center gap-2 text-red-400 text-sm"
>
<AlertCircle class="w-4 h-4 flex-shrink-0" />
<WarningCircle class="w-4 h-4 flex-shrink-0" />
<span>{mealsStore.deleteError}</span>
</div>
{/if}
@ -71,7 +78,7 @@
{#if meal.inputType === 'photo'}
<Camera class="w-4 h-4 text-[var(--color-text-muted)]" />
{:else}
<PenLine class="w-4 h-4 text-[var(--color-text-muted)]" />
<PencilLine class="w-4 h-4 text-[var(--color-text-muted)]" />
{/if}
<span class="text-xs text-[var(--color-text-muted)] uppercase tracking-wide">
{MEAL_TYPE_LABELS[meal.mealType as keyof typeof MEAL_TYPE_LABELS]?.de ??
@ -104,9 +111,9 @@
class="p-2 rounded-lg hover:bg-[var(--color-background-elevated)] text-[var(--color-text-muted)] hover:text-red-400 transition-colors disabled:opacity-50"
>
{#if deleting === meal.id}
<Loader2 class="w-4 h-4 animate-spin" />
<CircleNotch class="w-4 h-4 animate-spin" />
{:else}
<Trash2 class="w-4 h-4" />
<Trash class="w-4 h-4" />
{/if}
</button>
</div>

View file

@ -5,7 +5,7 @@
import DailySummary from '$lib/components/DailySummary.svelte';
import MealList from '$lib/components/MealList.svelte';
import AddMealButton from '$lib/components/AddMealButton.svelte';
import { Camera, PenLine } from 'lucide-svelte';
import { Camera, PencilLine } from '@manacore/shared-icons';
// Redirect to login if not authenticated
$effect(() => {

View file

@ -6,7 +6,7 @@
import { apiClient } from '$lib/api/client';
import { suggestMealType, MEAL_TYPE_LABELS } from '@nutriphi/shared';
import type { AIAnalysisResult } from '@nutriphi/shared';
import { Camera, ArrowLeft, Loader2, Check, AlertCircle, X } from 'lucide-svelte';
import { Camera, ArrowLeft, CircleNotch, Check, WarningCircle, X } from '@manacore/shared-icons';
let inputType = $derived($page.url.searchParams.get('type') || 'photo');
let mealType = $state(suggestMealType());
@ -180,7 +180,7 @@
<div
class="bg-red-500/10 border border-red-500/20 rounded-xl p-3 mb-4 flex items-center gap-2 text-red-400"
>
<AlertCircle class="w-4 h-4 flex-shrink-0" />
<WarningCircle class="w-4 h-4 flex-shrink-0" />
<span class="flex-1 text-sm">{error}</span>
<button
onclick={() => (error = '')}
@ -201,7 +201,7 @@
class="w-full py-3 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white font-medium rounded-xl transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
>
{#if analyzing}
<Loader2 class="w-5 h-5 animate-spin" />
<CircleNotch class="w-5 h-5 animate-spin" />
Analysiere...
{:else}
Analysieren
@ -273,7 +273,7 @@
class="w-full py-3 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white font-medium rounded-xl transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
>
{#if saving}
<Loader2 class="w-5 h-5 animate-spin" />
<CircleNotch class="w-5 h-5 animate-spin" />
Speichern...
{:else}
<Check class="w-5 h-5" />

View file

@ -4,7 +4,15 @@
import { authStore } from '$lib/stores/auth.svelte';
import { apiClient } from '$lib/api/client';
import { DEFAULT_DAILY_VALUES } from '@nutriphi/shared';
import { ArrowLeft, Save, Loader2, AlertCircle, LogOut, User, Target } from 'lucide-svelte';
import {
ArrowLeft,
FloppyDisk,
CircleNotch,
WarningCircle,
SignOut,
User,
Target,
} from '@manacore/shared-icons';
interface UserGoals {
dailyCalories: number;
@ -117,7 +125,7 @@
onclick={handleLogout}
class="w-full py-2.5 px-4 bg-[var(--color-background-elevated)] hover:bg-red-500/20 text-[var(--color-text-secondary)] hover:text-red-400 font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
>
<LogOut class="w-4 h-4" />
<SignOut class="w-4 h-4" />
Abmelden
</button>
</section>
@ -140,7 +148,7 @@
{#if loading}
<div class="flex items-center justify-center py-8">
<Loader2 class="w-6 h-6 animate-spin text-[var(--color-text-muted)]" />
<CircleNotch class="w-6 h-6 animate-spin text-[var(--color-text-muted)]" />
</div>
{:else}
<div class="space-y-4">
@ -238,7 +246,7 @@
<div
class="bg-red-500/10 border border-red-500/20 rounded-lg p-3 flex items-center gap-2 text-red-400 text-sm"
>
<AlertCircle class="w-4 h-4 flex-shrink-0" />
<WarningCircle class="w-4 h-4 flex-shrink-0" />
<span>{error}</span>
</div>
{/if}
@ -257,10 +265,10 @@
class="w-full py-3 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white font-medium rounded-lg transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
>
{#if saving}
<Loader2 class="w-5 h-5 animate-spin" />
<CircleNotch class="w-5 h-5 animate-spin" />
Speichern...
{:else}
<Save class="w-5 h-5" />
<FloppyDisk class="w-5 h-5" />
Ziele speichern
{/if}
</button>