From 5973d241aa10b1de01db1d99603e591a2529834a Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 26 Jan 2026 12:54:40 +0300
Subject: [PATCH] feat(Page): render ComparisonSlider directly

---
 src/routes/Page.svelte | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/routes/Page.svelte b/src/routes/Page.svelte
index 75bf44b..3869dd4 100644
--- a/src/routes/Page.svelte
+++ b/src/routes/Page.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
+import { appliedFontsManager } from '$entities/Font';
+import { displayedFontsStore } from '$features/DisplayFont';
 import FontDisplay from '$features/DisplayFont/ui/FontDisplay/FontDisplay.svelte';
+import { controlManager } from '$features/SetupFont';
+import ComparisonSlider from '$widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte';
 import { FontSearch } from '$widgets/FontSearch';
 
 /**
@@ -9,6 +13,12 @@ import { FontSearch } from '$widgets/FontSearch';
 let searchContainer: HTMLElement;
 
 let isExpanded = $state(false);
+
+$effect(() => {
+    appliedFontsManager.touch(
+        displayedFontsStore.fonts.map(font => ({ slug: font.id, weight: controlManager.weight })),
+    );
+});
 </script>
 
 <!-- Font List -->
@@ -17,6 +27,8 @@ let isExpanded = $state(false);
         <FontSearch bind:showFilters={isExpanded} />
     </div>
 
+    <ComparisonSlider />
+
     <div class="will-change-tranform transition-transform content">
         <FontDisplay />
     </div>