chore(app): update config, dependencies, storybook, and app shell

src/routes/Page.svelte

@@ -4,149 +4,22 @@
 -->
 <script lang="ts">
 import { scrollBreadcrumbsStore } from '$entities/Breadcrumb';
-import type { ResponsiveManager } from '$shared/lib';
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
-import {
-    Logo,
-    Section,
-} from '$shared/ui';
-import ComparisonSlider from '$widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte';
-import { FontSearch } from '$widgets/FontSearch';
-import { SampleList } from '$widgets/SampleList';
-import CodeIcon from '@lucide/svelte/icons/code';
-import EyeIcon from '@lucide/svelte/icons/eye';
-import LineSquiggleIcon from '@lucide/svelte/icons/line-squiggle';
-import ScanSearchIcon from '@lucide/svelte/icons/search';
-import {
-    type Snippet,
-    getContext,
-} from 'svelte';
+import { ComparisonView } from '$widgets/ComparisonView';
+import { FontSearchSection } from '$widgets/FontSearch';
+import { SampleListSection } from '$widgets/SampleList';
 import { cubicIn } from 'svelte/easing';
 import { fade } from 'svelte/transition';
-
-let searchContainer: HTMLElement;
-
-let isExpanded = $state(true);
-const responsive = getContext<ResponsiveManager>('responsive');
-
-function handleTitleStatusChanged(
-    index: number,
-    isPast: boolean,
-    title?: Snippet<[{ className?: string }]>,
-    id?: string,
-) {
-    if (isPast && title) {
-        scrollBreadcrumbsStore.add({ index, title, id });
-    } else {
-        scrollBreadcrumbsStore.remove(index);
-    }
-
-    return () => {
-        scrollBreadcrumbsStore.remove(index);
-    };
-}
 </script>
 
-<!-- Font List -->
 <div
-    class="p-2 sm:p-3 md:p-4 h-full grid gap-3 sm:gap-4 grid-cols-[max-content_1fr]"
+    class="h-full flex flex-col gap-3 sm:gap-4"
     in:fade={{ duration: 500, delay: 150, easing: cubicIn }}
 >
-    <Section
-        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-8"
-        onTitleStatusChange={handleTitleStatusChanged}
-    >
-        {#snippet icon({ className })}
-            <CodeIcon class={className} />
-        {/snippet}
-        {#snippet description({ className })}
-            <span class={className}> Project_Codename </span>
-        {/snippet}
-        {#snippet content({ className })}
-            <div class={cn(className, 'col-start-0 col-span-2')}>
-                <Logo />
-            </div>
-        {/snippet}
-    </Section>
-
-    <Section
-        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-x-12 sm:gap-y-8"
-        index={1}
-        id="optical_comparator"
-        onTitleStatusChange={handleTitleStatusChanged}
-        stickyTitle={responsive.isDesktopLarge}
-        stickyOffset="4rem"
-    >
-        {#snippet icon({ className })}
-            <EyeIcon class={className} />
-        {/snippet}
-        {#snippet title({ className })}
-            <h1 class={className}>
-                Optical<br />Comparator
-            </h1>
-        {/snippet}
-        {#snippet content({ className })}
-            <div class={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
-                <ComparisonSlider />
-            </div>
-        {/snippet}
-    </Section>
-
-    <Section
-        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-x-12 sm:gap-y-8"
-        index={2}
-        id="query_module"
-        onTitleStatusChange={handleTitleStatusChanged}
-        stickyTitle={responsive.isDesktopLarge}
-        stickyOffset="4rem"
-    >
-        {#snippet icon({ className })}
-            <ScanSearchIcon class={className} />
-        {/snippet}
-        {#snippet title({ className })}
-            <h2 class={className}>
-                Query<br />Module
-            </h2>
-        {/snippet}
-        {#snippet content({ className })}
-            <div class={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
-                <FontSearch bind:showFilters={isExpanded} />
-            </div>
-        {/snippet}
-    </Section>
-
-    <Section
-        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-x-12 sm:gap-y-8"
-        index={3}
-        id="sample_set"
-        onTitleStatusChange={handleTitleStatusChanged}
-        stickyTitle={responsive.isDesktopLarge}
-        stickyOffset="4rem"
-    >
-        {#snippet icon({ className })}
-            <LineSquiggleIcon class={className} />
-        {/snippet}
-        {#snippet title({ className })}
-            <h2 class={className}>
-                Sample<br />Set
-            </h2>
-        {/snippet}
-        {#snippet content({ className })}
-            <div class={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
-                <SampleList />
-            </div>
-        {/snippet}
-    </Section>
+    <section class="w-auto">
+        <ComparisonView />
+    </section>
+    <main class="w-full pt-0 pb-10 sm:px-6 sm:pt-16 sm:pb-12 md:px-8 md:pt-32 md:pb-16 lg:px-10 lg:pt-48 lg:pb-20 xl:px-16">
+        <FontSearchSection />
+        <SampleListSection index={1} />
+    </main>
 </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>