feat(FontComparer): create FontComparer component that loads fonts and displays ComparisonSlider

src/features/DisplayFont/ui/FontComparer/FontComparer.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+import { appliedFontsManager } from '$entities/Font';
+import { Input } from '$shared/shadcn/ui/input';
+import { ComparisonSlider } from '$shared/ui';
+import { displayedFontsStore } from '../../model';
+import PairSelector from '../PairSelector/PairSelector.svelte';
+
+let displayedText = $state('The quick brown fox jumps over the lazy dog...');
+const [fontA, fontB] = $derived(displayedFontsStore.selectedPair);
+const hasAnyPairs = $derived(displayedFontsStore.fonts.length > 0);
+
+$effect(() => {
+    appliedFontsManager.touch(displayedFontsStore.fonts.map(font => font.id));
+});
+</script>
+
+{#if hasAnyPairs}
+    <div class="flex flex-col gap-4">
+        <div class="flex flex-row gap-4">
+            <Input bind:value={displayedText} />
+            <PairSelector />
+        </div>
+
+        {#if fontA && fontB}
+            <ComparisonSlider fontA={fontA} fontB={fontB} text={displayedText} />
+        {/if}
+    </div>
+{/if}