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

@@ -0,0 +1,29 @@
+<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

@@ -0,0 +1,34 @@
+<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>