feat(Page): display all components without conditions

src/routes/Page.svelte

@@ -11,6 +11,7 @@ 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';
 
@@ -34,10 +35,7 @@ $effect(() => {
         <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',
-                isEmptyScreen
-                    ? 'grow justify-center'
-                    : 'animate-search',
+                'will-change-[flex-grow] transform-gpu grow-0 justify-start',
             )}
         >
             <div
@@ -50,33 +48,29 @@ $effect(() => {
         </div>
     {/key}
 
-    {#if displayedFontsStore.fonts.length > 1}
-        <Section class="my-12 gap-8" index={1}>
-            {#snippet icon({ className })}
-                <ScanEyeIcon class={className} />
-            {/snippet}
-            {#snippet title({ className })}
-                <h1 class={className}>
-                    Optical<br>Comparator
-                </h1>
-            {/snippet}
-            <ComparisonSlider />
-        </Section>
-    {/if}
+    <Section class="my-12 gap-8" index={1}>
+        {#snippet icon({ className })}
+            <ScanEyeIcon class={className} />
+        {/snippet}
+        {#snippet title({ className })}
+            <h1 class={className}>
+                Optical<br>Comparator
+            </h1>
+        {/snippet}
+        <ComparisonSlider />
+    </Section>
 
-    {#if displayedFontsStore.hasAnyFonts}
-        <Section class="my-12 gap-8" index={2}>
-            {#snippet icon({ className })}
-                <LineSquiggleIcon class={className} />
-            {/snippet}
-            {#snippet title({ className })}
-                <h2 class={className}>
-                    Sample<br>Set
-                </h2>
-            {/snippet}
-            <FontDisplay />
-        </Section>
-    {/if}
+    <Section class="my-12 gap-8" index={2}>
+        {#snippet icon({ className })}
+            <LineSquiggleIcon class={className} />
+        {/snippet}
+        {#snippet title({ className })}
+            <h2 class={className}>
+                Sample<br>Set
+            </h2>
+        {/snippet}
+        <SampleList />
+    </Section>
 </div>
 
 <style>