From 204aa75959365c93725a9beeb8ef495e1f7f5a33 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 7 Feb 2026 18:39:52 +0300
Subject: [PATCH] feat(SampleList): move TypographyMenu to SampleList to
 show/hide it when list is visible on a screen

---
 src/app/ui/Layout.svelte                      |  2 -
 .../ui/SampleList/SampleList.svelte           | 66 ++++++++++++++-----
 2 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/src/app/ui/Layout.svelte b/src/app/ui/Layout.svelte
index 80f86f3..cf7a452 100644
--- a/src/app/ui/Layout.svelte
+++ b/src/app/ui/Layout.svelte
@@ -11,7 +11,6 @@
  * - Footer area (currently empty, reserved for future use)
  */
 import { BreadcrumbHeader } from '$entities/Breadcrumb';
-import { TypographyMenu } from '$features/SetupFont';
 import favicon from '$shared/assets/favicon.svg';
 import { ResponsiveProvider } from '$shared/lib';
 import { ScrollArea } from '$shared/shadcn/ui/scroll-area';
@@ -52,7 +51,6 @@ let { children }: Props = $props();
         <!-- <ScrollArea class="h-screen w-screen"> -->
         <main class="flex-1 h-full w-full max-w-6xl mx-auto px-0 pt-0 pb-10 sm:px-6 sm:pt-8 sm:pb-12 md:px-8 md:pt-10 md:pb-16 lg:px-10 lg:pt-12 lg:pb-20 xl:px-16 relative overflow-x-hidden">
             <TooltipProvider>
-                <TypographyMenu />
                 {@render children?.()}
             </TooltipProvider>
         </main>
diff --git a/src/widgets/SampleList/ui/SampleList/SampleList.svelte b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
index 4f609dd..6f0c525 100644
--- a/src/widgets/SampleList/ui/SampleList/SampleList.svelte
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -1,7 +1,8 @@
 <!--
     Component: SampleList
     Renders a list of fonts in a virtualized list to improve performance.
-    Includes pagination with auto-loading when scrolling near the bottom.
+    - Includes pagination with auto-loading when scrolling near the bottom.
+    - Provides a typography menu for font setup.
 -->
 <script lang="ts">
 import {
@@ -10,9 +11,19 @@ import {
     unifiedFontStore,
 } from '$entities/Font';
 import { FontSampler } from '$features/DisplayFont';
-import { controlManager } from '$features/SetupFont';
+import {
+    TypographyMenu,
+    controlManager,
+} from '$features/SetupFont';
 
 let text = $state('The quick brown fox jumps over the lazy dog...');
+let wrapper = $state<HTMLDivElement | null>(null);
+// Binds to the actual window height
+let innerHeight = $state(0);
+// Is the component above the middle of the viewport?
+let isAboveMiddle = $state(false);
+
+const isLoading = $derived(unifiedFontStore.isFetching || unifiedFontStore.isLoading);
 
 /**
  * Load more fonts by moving to the next page
@@ -51,27 +62,46 @@ const displayRange = $derived.by(() => {
     return `Showing ${loadedCount} of ${total} fonts`;
 });
 
-const isLoading = $derived(unifiedFontStore.isFetching || unifiedFontStore.isLoading);
+function checkPosition() {
+    if (!wrapper) return;
+
+    const rect = wrapper.getBoundingClientRect();
+    const viewportMiddle = innerHeight / 2;
+
+    isAboveMiddle = rect.top < viewportMiddle;
+}
 </script>
 
-<FontVirtualList
-    items={unifiedFontStore.fonts}
-    total={unifiedFontStore.pagination.total}
-    onNearBottom={handleNearBottom}
-    itemHeight={220}
-    useWindowScroll={true}
-    weight={controlManager.weight}
-    {isLoading}
->
-    {#snippet children({
+<svelte:window
+    bind:innerHeight
+    onscroll={checkPosition}
+    onresize={checkPosition}
+/>
+
+<div bind:this={wrapper}>
+    <FontVirtualList
+        items={unifiedFontStore.fonts}
+        total={unifiedFontStore.pagination.total}
+        onNearBottom={handleNearBottom}
+        itemHeight={220}
+        useWindowScroll={true}
+        weight={controlManager.weight}
+        {isLoading}
+    >
+        {#snippet children({
     item: font,
     isFullyVisible,
     isPartiallyVisible,
     proximity,
     index,
 })}
-        <FontListItem {font} {isFullyVisible} {isPartiallyVisible} {proximity}>
-            <FontSampler {font} bind:text {index} />
-        </FontListItem>
-    {/snippet}
-</FontVirtualList>
+            <FontListItem {font} {isFullyVisible} {isPartiallyVisible} {proximity}>
+                <FontSampler {font} bind:text {index} />
+            </FontListItem>
+        {/snippet}
+    </FontVirtualList>
+
+    {#if isAboveMiddle}
+        <TypographyMenu />
+    {/if}
+</div>