feat(displayedFontsStore): fix store to work with fontA and fontB to compare

src/features/DisplayFont/model/store/displayedFontsStore.svelte.ts

@@ -15,18 +15,9 @@ export class DisplayedFontsStore {
         return selectedFontsStore.all;
     });
 
-    #fontPairs = $derived.by(() => {
-        const fonts = this.#displayedFonts;
-        const pairs = fonts.flatMap((v1, i) =>
-            fonts.slice(i + 1).map<[UnifiedFont, UnifiedFont]>(v2 => [v1, v2])
-        );
-        if (pairs.length && this.isSelectedPairEmpty()) {
-            this.selectedPair = pairs[0];
-        }
-        return pairs;
-    });
+    #fontA = $state<UnifiedFont | undefined>(undefined);
 
-    #selectedPair = $state<Partial<[UnifiedFont, UnifiedFont]>>([]);
+    #fontB = $state<UnifiedFont | undefined>(undefined);
 
     #hasAnySelectedFonts = $derived(this.#displayedFonts.length > 0);
 
@@ -34,18 +25,20 @@ export class DisplayedFontsStore {
         return this.#displayedFonts;
     }
 
-    get pairs() {
-        return this.#fontPairs;
+    get fontA() {
+        return this.#fontA ?? this.#displayedFonts[0];
     }
 
-    get selectedPair() {
-        return this.#selectedPair;
+    set fontA(font: UnifiedFont | undefined) {
+        this.#fontA = font;
     }
 
-    set selectedPair(pair: Partial<[UnifiedFont, UnifiedFont]>) {
-        const [first, second] = this.#selectedPair;
-        const [newFist, newSecond] = pair;
-        this.#selectedPair = [newFist ?? first, newSecond ?? second];
+    get fontB() {
+        return this.#fontB ?? this.#displayedFonts[1];
+    }
+
+    set fontB(font: UnifiedFont | undefined) {
+        this.#fontB = font;
     }
 
     get text() {
@@ -60,9 +53,8 @@ export class DisplayedFontsStore {
         return this.#hasAnySelectedFonts;
     }
 
-    isSelectedPairEmpty(): boolean {
-        const [font1, font2] = this.#selectedPair;
-        return !font1 || !font2;
+    getById(id: string): UnifiedFont | undefined {
+        return selectedFontsStore.getById(id);
     }
 }