src/features/DisplayFont/ui/FontComparer/FontComparer.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-import { appliedFontsManager } from '$entities/Font';
-import { controlManager } from '$features/SetupFont';
-import { ComparisonSlider } from '$widgets/ComparisonSlider/ui';
-import { cubicOut } from 'svelte/easing';
-import { fly } from 'svelte/transition';
-import { displayedFontsStore } from '../../model';
-import PairSelector from '../PairSelector/PairSelector.svelte';
-
-let displayedText = $state('The quick brown fox jumps over the lazy dog...');
-const [fontA, fontB] = $derived(displayedFontsStore.selectedPair);
-const hasAnyPairs = $derived(displayedFontsStore.fonts.length > 0);
-
-$effect(() => {
-    appliedFontsManager.touch(
-        displayedFontsStore.fonts.map(font => ({ slug: font.id, weight: controlManager.weight })),
-    );
-});
-</script>
-
-{#if hasAnyPairs}
-    <div class="flex flex-col gap-4">
-        <div class="flex flex-row gap-4">
-            <PairSelector />
-        </div>
-
-        {#if fontA && fontB}
-            <div in:fly={{ y: 0, x: -50, duration: 300, easing: cubicOut, opacity: 0.2 }}>
-                <ComparisonSlider
-                    fontA={fontA}
-                    fontB={fontB}
-                    bind:text={displayedText}
-                />
-            </div>
-        {/if}
-    </div>
-{/if}

src/features/DisplayFont/ui/FontDisplay/FontDisplay.svelte

@@ -4,12 +4,9 @@
 -->
 <script lang="ts">
 import { displayedFontsStore } from '../../model';
-import FontComparer from '../FontComparer/FontComparer.svelte';
 import FontSampler from '../FontSampler/FontSampler.svelte';
 </script>
 
-<FontComparer />
-
 <div class="grid gap-2 grid-cols-[repeat(auto-fit,minmax(500px,1fr))]">
     {#each displayedFontsStore.fonts as font (font.id)}
         <FontSampler font={font} bind:text={displayedFontsStore.text} />

src/features/DisplayFont/ui/FontPair/FontPair.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-import {
-    FontApplicator,
-    type UnifiedFont,
-} from '$entities/Font';
-
-interface Props {
-    pair: [UnifiedFont, UnifiedFont];
-    selectedPair: Partial<[UnifiedFont, UnifiedFont]>;
-}
-
-let { pair, selectedPair = $bindable() }: Props = $props();
-
-const [font1, font2] = $derived(pair);
-
-function handleClick() {
-    selectedPair = pair;
-}
-</script>
-
-<div class="flex flex-row justify-between w-full" onclick={handleClick}>
-    <FontApplicator id={font1.id} name={font1.name}>
-        {font1.name}
-    </FontApplicator>
-    vs
-    <FontApplicator id={font2.id} name={font2.name}>
-        {font2.name}
-    </FontApplicator>
-</div>

src/features/DisplayFont/ui/PairSelector/PairSelector.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-import { FontVirtualList } from '$entities/Font';
-import { buttonVariants } from '$shared/shadcn/ui/button';
-import {
-    Content as PopoverContent,
-    Root as PopoverRoot,
-    Trigger as PopoverTrigger,
-} from '$shared/shadcn/ui/popover';
-import { displayedFontsStore } from '../../model';
-import FontPair from '../FontPair/FontPair.svelte';
-
-let open = $state(false);
-
-const triggerContent = $derived.by(() => {
-    const [beforeFont, afterFont] = displayedFontsStore.selectedPair ?? [];
-    if (!beforeFont || !afterFont) return 'Select a pair';
-    return `${beforeFont.name} vs ${afterFont.name}`;
-});
-
-const triggerDisabled = $derived(displayedFontsStore.pairs.length === 0);
-</script>
-
-<PopoverRoot bind:open>
-    <PopoverTrigger class={buttonVariants({ variant: 'outline' })} disabled={triggerDisabled}>
-        {triggerContent}
-    </PopoverTrigger>
-    <PopoverContent>
-        <FontVirtualList items={displayedFontsStore.pairs}>
-            {#snippet children({ item: pair })}
-                <FontPair {pair} bind:selectedPair={displayedFontsStore.selectedPair} />
-            {/snippet}
-        </FontVirtualList>
-    </PopoverContent>
-</PopoverRoot>