From 858daff860eca9f9800371e2cd7216702f6672d1 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 15 Feb 2026 23:11:10 +0300
Subject: [PATCH] feat(ComparisonSlider): create a scrollable list of fonts
 with clever controls

---
 .../components/FontList.svelte                | 202 ++++++++++++++++++
 1 file changed, 202 insertions(+)
 create mode 100644 src/widgets/ComparisonSlider/ui/ComparisonSlider/components/FontList.svelte

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/FontList.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/FontList.svelte
new file mode 100644
index 0000000..bcbf0cc
--- /dev/null
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/FontList.svelte
@@ -0,0 +1,202 @@
+<!--
+    Component: FontList
+    A scrollable list of fonts with dual selection buttons for fontA and fontB.
+-->
+<script lang="ts">
+import {
+    FontVirtualList,
+    type UnifiedFont,
+} from '$entities/Font';
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import { comparisonStore } from '$widgets/ComparisonSlider/model';
+import { cubicOut } from 'svelte/easing';
+import { draw } from 'svelte/transition';
+
+const fontA = $derived(comparisonStore.fontA);
+const fontB = $derived(comparisonStore.fontB);
+const typography = $derived(comparisonStore.typography);
+
+/**
+ * Select a font as fontA (right slot - compare_to)
+ */
+function selectFontA(font: UnifiedFont) {
+    comparisonStore.fontA = font;
+}
+
+/**
+ * Select a font as fontB (left slot - compare_from)
+ */
+function selectFontB(font: UnifiedFont) {
+    comparisonStore.fontB = font;
+}
+
+/**
+ * Check if a font is selected as fontA
+ */
+function isFontA(font: UnifiedFont): boolean {
+    return fontA?.id === font.id;
+}
+
+/**
+ * Check if a font is selected as fontB
+ */
+function isFontB(font: UnifiedFont): boolean {
+    return fontB?.id === font.id;
+}
+</script>
+
+{#snippet rightBrackets(className?: string)}
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class={cn(
+            'lucide lucide-focus-icon lucide-focus right-0 top-0 absolute',
+            className,
+        )}
+    >
+        <path
+            transition:draw={{ duration: 300, delay: 150, easing: cubicOut }}
+            d="M17 3h2a2 2 0 0 1 2 2v2"
+        />
+    </svg>
+
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class={cn(
+            'lucide lucide-focus-icon lucide-focus right-0 bottom-0 absolute',
+            className,
+        )}
+    >
+        <path
+            transition:draw={{ duration: 300, delay: 150, easing: cubicOut }}
+            d="M21 17v2a2 2 0 0 1-2 2h-2"
+        />
+    </svg>
+{/snippet}
+
+{#snippet leftBrackets(className?: string)}
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class={cn(
+            'lucide lucide-focus-icon lucide-focus left-0 top-0 absolute',
+            className,
+        )}
+    >
+        <path
+            transition:draw={{ duration: 300, delay: 150, easing: cubicOut }}
+            d="M3 7V5a2 2 0 0 1 2-2h2"
+        />
+    </svg>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class={cn(
+            'lucide lucide-focus-icon lucide-focus left-0 bottom-0 absolute',
+            className,
+        )}
+    >
+        <path
+            transition:draw={{ duration: 300, delay: 150, easing: cubicOut }}
+            d="M7 21H5a2 2 0 0 1-2-2v-2"
+        />
+    </svg>
+{/snippet}
+
+{#snippet brackets(renderLeft?: boolean, renderRight?: boolean, className?: string)}
+    {#if renderLeft}
+        {@render leftBrackets(className)}
+    {/if}
+    {#if renderRight}
+        {@render rightBrackets(className)}
+    {/if}
+{/snippet}
+
+<div class="flex flex-col h-full min-h-0 bg-transparent">
+    <div class="flex-1 min-h-0">
+        <FontVirtualList
+            weight={typography.weight}
+            itemHeight={36}
+            class="bg-transparent"
+        >
+            {#snippet children({ item: font })}
+                {@const isSelectedA = isFontA(font)}
+                {@const isSelectedB = isFontB(font)}
+                {@const isEither = isSelectedA || isSelectedB}
+                {@const isBoth = isSelectedA && isSelectedB}
+                {@const handleSelectFontA = () => selectFontA(font)}
+                {@const handleSelectFontB = () => selectFontB(font)}
+
+                <div class="group relative flex w-auto h-[36px] border-b border-black/[0.03] overflow-hidden mr-4 lg:mr-6">
+                    <div
+                        class={cn(
+                            'absolute inset-0 flex items-center justify-center z-20 pointer-events-none transition-all duration-500 cubic-bezier-out',
+                            isSelectedB && !isBoth && '-translate-x-1/4',
+                            isSelectedA && !isBoth && 'translate-x-1/4',
+                            isBoth && 'translate-x-0',
+                        )}
+                    >
+                        <div class="relative flex items-center px-6">
+                            <span
+                                class={cn(
+                                    'font-mono text-[10px] sm:text-[11px] uppercase tracking-tighter select-none transition-all duration-300',
+                                    isEither
+                                        ? 'opacity-100 font-bold'
+                                        : 'opacity-30 group-hover:opacity-100',
+                                    isSelectedB && 'text-indigo-500',
+                                    isSelectedA && 'text-normal-950',
+                                    isBoth && 'text-indigo-600',
+                                )}
+                            >
+                                --- {font.name} ---
+                            </span>
+                        </div>
+                    </div>
+
+                    <button
+                        onclick={handleSelectFontB}
+                        class="flex-1 relative flex items-center justify-between transition-all duration-200 cursor-pointer hover:bg-indigo-500/[0.03]"
+                    >
+                        {@render brackets(isSelectedB, isSelectedB && !isBoth, 'stroke-1 size-7 stroke-indigo-600')}
+                    </button>
+
+                    <button
+                        onclick={handleSelectFontA}
+                        class="flex-1 relative flex items-center justify-end transition-all duration-200 cursor-pointer hover:bg-black/[0.02]"
+                    >
+                        {@render brackets(isSelectedA && !isBoth, isSelectedA, 'stroke-1 size-7 stroke-normal-950')}
+                    </button>
+                </div>
+            {/snippet}
+        </FontVirtualList>
+    </div>
+</div>