feat(Page): switch some sections

src/routes/Page.svelte

@@ -3,70 +3,78 @@
     Description: The main page component of the application.
 -->
 <script lang="ts">
-import { appliedFontsManager } from '$entities/Font';
+import { BreadcrumbHeader } from '$entities/Breadcrumb';
-import { displayedFontsStore } from '$features/DisplayFont';
+import { scrollBreadcrumbsStore } from '$entities/Breadcrumb';
-import FontDisplay from '$features/DisplayFont/ui/FontDisplay/FontDisplay.svelte';
-import { controlManager } from '$features/SetupFont';
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import { Section } from '$shared/ui';
 import ComparisonSlider from '$widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte';
 import { FontSearch } from '$widgets/FontSearch';
 import { SampleList } from '$widgets/SampleList';
 import LineSquiggleIcon from '@lucide/svelte/icons/line-squiggle';
 import ScanEyeIcon from '@lucide/svelte/icons/scan-eye';
+import ScanSearchIcon from '@lucide/svelte/icons/search';
+import type { Snippet } from 'svelte';
 
 let searchContainer: HTMLElement;
 
 let isExpanded = $state(false);
-let isOpen = $state(false);
 
-let isEmptyScreen = $derived(!displayedFontsStore.hasAnyFonts && !isExpanded && !isOpen);
+function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippet<[{ className?: string }]>) {
+    if (isPast && title) {
+        scrollBreadcrumbsStore.add({ index, title });
+    } else {
+        scrollBreadcrumbsStore.remove(index);
+    }
 
-$effect(() => {
+    return () => {
-    appliedFontsManager.touch(
+        scrollBreadcrumbsStore.remove(index);
-        displayedFontsStore.fonts.map(font => ({ slug: font.id, weight: controlManager.weight })),
+    };
-    );
+}
-});
+
+// $effect(() => {
+//     appliedFontsManager.touch(
+//         selectedFontsStore.all.map(font => ({
+//             slug: font.id,
+//             weight: controlManager.weight,
+//         })),
+//     );
+// });
 </script>
 
+<BreadcrumbHeader />
+
 <!-- Font List -->
 <div class="p-2 h-full flex flex-col gap-3">
-    {#key isEmptyScreen}
+    <Section class="my-12 gap-8" index={0} onTitleStatusChange={handleTitleStatusChanged}>
-        <div
-            class={cn(
-                'flex flex-col transition-all duration-700 ease-[cubic-bezier(0.23,1,0.32,1)] mx-40',
-                'will-change-[flex-grow] transform-gpu grow-0 justify-start',
-            )}
-        >
-            <div
-                class={cn(
-                    'transition-transform duration-700 ease-[cubic-bezier(0.23,1,0.32,1)]',
-                )}
-            >
-                <FontSearch bind:showFilters={isExpanded} bind:isOpen />
-            </div>
-        </div>
-    {/key}
-
-    <Section class="my-12 gap-8" index={1}>
         {#snippet icon({ className })}
             <ScanEyeIcon class={className} />
         {/snippet}
         {#snippet title({ className })}
             <h1 class={className}>
-                Optical<br>Comparator
+                Optical<br />Comparator
             </h1>
         {/snippet}
         <ComparisonSlider />
     </Section>
 
-    <Section class="my-12 gap-8" index={2}>
+    <Section class="my-12 gap-8" index={1} onTitleStatusChange={handleTitleStatusChanged}>
+        {#snippet icon({ className })}
+            <ScanSearchIcon class={className} />
+        {/snippet}
+        {#snippet title({ className })}
+            <h2 class={className}>
+                Query<br />Module
+            </h2>
+        {/snippet}
+        <FontSearch bind:showFilters={isExpanded} />
+    </Section>
+
+    <Section class="my-12 gap-8" index={2} onTitleStatusChange={handleTitleStatusChanged}>
         {#snippet icon({ className })}
             <LineSquiggleIcon class={className} />
         {/snippet}
         {#snippet title({ className })}
             <h2 class={className}>
-                Sample<br>Set
+                Sample<br />Set
             </h2>
         {/snippet}
         <SampleList />
@@ -74,45 +82,13 @@ $effect(() => {
 </div>
 
 <style>
-@keyframes search {
-        0% {
-            opacity: 1;
-            transform: scale(1);
-            flex-grow: 1;
-            justify-content: center;
-        }
-        15% {
-            opacity: 0.5;
-            transform: scale(0.95);
-        }
-        30% {
-            opacity: 0;
-        }
-        100% {
-            opacity: 1;
-            transform: scale(1);
-            flex-grow: 0;
-            justify-content: flex-start;
-        }
-    }
-
-    .animate-search {
-        animation: search 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-    }
-
 .content {
-        /* Tells the browser to skip rendering off-screen content */
+    /* Tells the browser to skip rendering off-screen content */
-        content-visibility: auto;
+    content-visibility: auto;
-        /* Helps the browser reserve space without calculating everything */
+    /* Helps the browser reserve space without calculating everything */
-        contain-intrinsic-size: 1px 1000px;
+    contain-intrinsic-size: 1px 1000px;
 
-        -webkit-font-smoothing: antialiased;
+    -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
+    -moz-osx-font-smoothing: grayscale;
-}
-
-.will-change-[height] {
-    will-change: flex-grow, padding;
-    /* Forces GPU acceleration for the layout shift */
-    transform: translateZ(0);
 }
 </style>