From 1b7628423741d2c5640cea2102e37e438c55b7b2 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 20 Jan 2026 09:33:57 +0300
Subject: [PATCH] feat(PairSelector): implement PairSelector component that
 allows to choose the pair of fonts to compare

---
 .../DisplayFont/ui/FontPair/FontPair.svelte   | 29 ++++++++++++++++
 .../ui/PairSelector/PairSelector.svelte       | 34 +++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 src/features/DisplayFont/ui/FontPair/FontPair.svelte
 create mode 100644 src/features/DisplayFont/ui/PairSelector/PairSelector.svelte

diff --git a/src/features/DisplayFont/ui/FontPair/FontPair.svelte b/src/features/DisplayFont/ui/FontPair/FontPair.svelte
new file mode 100644
index 0000000..b99626d
--- /dev/null
+++ b/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>
diff --git a/src/features/DisplayFont/ui/PairSelector/PairSelector.svelte b/src/features/DisplayFont/ui/PairSelector/PairSelector.svelte
new file mode 100644
index 0000000..d3fb5d8
--- /dev/null
+++ b/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>