refactor(apps): final SVG-to-Phosphor pass for photos, clock, mukke, inventar

Replace remaining inline SVG icons in photos (25 SVGs), mukke player
controls, clock world-clock, and inventar settings. All remaining
inline SVGs are now exclusively spinners, brand logos, or dynamic
icon rendering via {@html}.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-03-31 12:41:43 +02:00
parent 59e535af94
commit 25e39620ec
16 changed files with 65 additions and 350 deletions

View file

@ -1,7 +1,7 @@
<script lang="ts">
import { playerStore } from '$lib/stores/player.svelte';
import FrequencyBars from '$lib/visualizer/FrequencyBars.svelte';
import { MusicNote, Pause, Play, X } from '@manacore/shared-icons';
import { MusicNote, Pause, Play, Warning, X } from '@manacore/shared-icons';
let progress = $derived(
playerStore.duration > 0 ? (playerStore.currentTime / playerStore.duration) * 100 : 0
@ -22,14 +22,7 @@
<div
class="flex items-center gap-2 px-4 py-2 bg-red-500/10 border-b border-red-500/20 text-sm text-red-500"
>
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<Warning size={16} class="shrink-0" />
<span class="truncate">{playerStore.error}</span>
<button
onclick={() => playerStore.clearError()}

View file

@ -2,7 +2,14 @@
import { audioStore } from '$lib/stores/audio.svelte';
import { editorStore } from '$lib/stores/editor.svelte';
import { formatTime } from '$lib/utils/time-format';
import { Pause, Play, SkipBack, SkipForward } from '@manacore/shared-icons';
import {
MagnifyingGlassMinus,
MagnifyingGlassPlus,
Pause,
Play,
SkipBack,
SkipForward,
} from '@manacore/shared-icons';
interface Props {
onPlay?: () => void;
@ -145,14 +152,7 @@
class="p-2 rounded-lg hover:bg-surface-hover transition-colors"
aria-label="Zoom out"
>
<svg class="w-4 h-4" 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 0zM13 10H7"
/>
</svg>
<MagnifyingGlassMinus size={16} />
</button>
<span class="text-xs text-foreground-secondary min-w-[40px] text-center">
{Math.round(editorStore.zoom * 100)}%
@ -162,14 +162,7 @@
class="p-2 rounded-lg hover:bg-surface-hover transition-colors"
aria-label="Zoom in"
>
<svg class="w-4 h-4" 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 0zM10 7v6m3-3H7"
/>
</svg>
<MagnifyingGlassPlus size={16} />
</button>
</div>

View file

@ -1,7 +1,7 @@
<script lang="ts">
import { libraryStore } from '$lib/stores/library.svelte';
import { MukkeEvents } from '@manacore/shared-utils/analytics';
import { Check, DownloadSimple, Plus, X } from '@manacore/shared-icons';
import { Check, DownloadSimple, Plus, Warning, X } from '@manacore/shared-icons';
interface UploadFile {
file: File;
@ -187,19 +187,7 @@
{:else if uf.status === 'uploaded'}
<Check size={20} class="text-green-500" />
{:else if uf.status === 'error'}
<svg
class="w-5 h-5 text-red-500 flex-shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<Warning size={20} class="text-red-500 flex-shrink-0" />
{:else}
<div class="w-5 h-5 rounded-full bg-foreground-secondary/20 flex-shrink-0"></div>
{/if}