From c2542026a41737718966500e8ff638c8a7c59c60 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 20 Jan 2026 09:40:42 +0300
Subject: [PATCH] feat(FontComparer): create FontComparer component that loads
 fonts and displays ComparisonSlider

---
 .../ui/FontComparer/FontComparer.svelte       | 28 +++++++++++++++++++
 .../ui/FontDisplay/FontDisplay.svelte         |  5 +++-
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 src/features/DisplayFont/ui/FontComparer/FontComparer.svelte

diff --git a/src/features/DisplayFont/ui/FontComparer/FontComparer.svelte b/src/features/DisplayFont/ui/FontComparer/FontComparer.svelte
new file mode 100644
index 0000000..7a3238b
--- /dev/null
+++ b/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}
diff --git a/src/features/DisplayFont/ui/FontDisplay/FontDisplay.svelte b/src/features/DisplayFont/ui/FontDisplay/FontDisplay.svelte
index 915078f..3aea03a 100644
--- a/src/features/DisplayFont/ui/FontDisplay/FontDisplay.svelte
+++ b/src/features/DisplayFont/ui/FontDisplay/FontDisplay.svelte
@@ -2,11 +2,14 @@
     Component: FontDisplay
     Displays a grid of FontSampler components for each displayed font.
 -->
-<script>
+<script lang="ts">
 import { displayedFontsStore } from '../../model';
+import FontComparer from '../FontComparer/FontComparer.svelte';
 import FontSampler from '../FontSampler/FontSampler.svelte';
 </script>
 
+<FontComparer />
+
 <div class="grid gap-2 grid-cols-[repeat(auto-fit,minmax(500px,1fr))]">
     {#each displayedFontsStore.fonts as font (font.id)}
         <FontSampler font={font} bind:text={displayedFontsStore.text} />