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

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>

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
+<svelte:window
-    items={unifiedFontStore.fonts}
+    bind:innerHeight
-    total={unifiedFontStore.pagination.total}
+    onscroll={checkPosition}
-    onNearBottom={handleNearBottom}
+    onresize={checkPosition}
-    itemHeight={220}
+/>
-    useWindowScroll={true}
+
-    weight={controlManager.weight}
+<div bind:this={wrapper}>
-    {isLoading}
+    <FontVirtualList
->
+        items={unifiedFontStore.fonts}
-    {#snippet children({
+        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}>
+            <FontListItem {font} {isFullyVisible} {isPartiallyVisible} {proximity}>
-            <FontSampler {font} bind:text {index} />
+                <FontSampler {font} bind:text {index} />
-        </FontListItem>
+            </FontListItem>
-    {/snippet}
+        {/snippet}
-</FontVirtualList>
+    </FontVirtualList>
+
+    {#if isAboveMiddle}
+        <TypographyMenu />
+    {/if}
+</div>