From 7ffc5d6a34a80983562990e6052b07f79eb8dfb5 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 24 Jan 2026 15:39:38 +0300
Subject: [PATCH] feat(Page): move search to page

---
 src/routes/Page.svelte | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/routes/Page.svelte b/src/routes/Page.svelte
index 8f077bd..75bf44b 100644
--- a/src/routes/Page.svelte
+++ b/src/routes/Page.svelte
@@ -1,12 +1,35 @@
 <script lang="ts">
 import FontDisplay from '$features/DisplayFont/ui/FontDisplay/FontDisplay.svelte';
+import { FontSearch } from '$widgets/FontSearch';
 
 /**
  * Page Component
  */
+
+let searchContainer: HTMLElement;
+
+let isExpanded = $state(false);
 </script>
 
 <!-- Font List -->
-<div class="p-2">
-    <FontDisplay />
+<div class="p-2 will-change-[height]">
+    <div bind:this={searchContainer}>
+        <FontSearch bind:showFilters={isExpanded} />
+    </div>
+
+    <div class="will-change-tranform transition-transform content">
+        <FontDisplay />
+    </div>
 </div>
+
+<style>
+.content {
+        /* Tells the browser to skip rendering off-screen content */
+        content-visibility: auto;
+        /* Helps the browser reserve space without calculating everything */
+        contain-intrinsic-size: 1px 1000px;
+
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+}
+</style>