feat(displayedFontStore): add logic for font pairs calculation

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

@@ -1,4 +1,7 @@
-import { selectedFontsStore } from '$entities/Font';
+import {
+    type UnifiedFont,
+    selectedFontsStore,
+} from '$entities/Font';
 
 /**
  * Store for displayed font samples
@@ -12,10 +15,35 @@ 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;
+    });
+
+    #selectedPair = $state<Partial<[UnifiedFont, UnifiedFont]>>([]);
+
     get fonts() {
         return this.#displayedFonts;
     }
 
+    get pairs() {
+        return this.#fontPairs;
+    }
+
+    get selectedPair() {
+        return this.#selectedPair;
+    }
+
+    set selectedPair(pair: Partial<[UnifiedFont, UnifiedFont]>) {
+        this.#selectedPair = pair;
+    }
+
     get text() {
         return this.#sampleText;
     }
@@ -23,6 +51,11 @@ export class DisplayedFontsStore {
     set text(text: string) {
         this.#sampleText = text;
     }
+
+    isSelectedPairEmpty(): boolean {
+        const [font1, font2] = this.#selectedPair;
+        return !font1 || !font2;
+    }
 }
 
 export const displayedFontsStore = new DisplayedFontsStore();