feat(SampleList): move TypographyMenu to SampleList to show/hide it when list is visible on a screen

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>