From e125b2c7950bf654470e72d91f2b29adc3b0ef7f Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 25 Feb 2026 09:59:19 +0300
Subject: [PATCH] feat(FontSampler): redesign component, remuve unused code,
 add stories

---
 .../ui/FontSampler/FontSampler.stories.svelte | 116 ++++++++++++++++++
 .../ui/FontSearch/FontSearch.svelte           |   3 +-
 2 files changed, 117 insertions(+), 2 deletions(-)
 create mode 100644 src/features/DisplayFont/ui/FontSampler/FontSampler.stories.svelte

diff --git a/src/features/DisplayFont/ui/FontSampler/FontSampler.stories.svelte b/src/features/DisplayFont/ui/FontSampler/FontSampler.stories.svelte
new file mode 100644
index 0000000..0238a83
--- /dev/null
+++ b/src/features/DisplayFont/ui/FontSampler/FontSampler.stories.svelte
@@ -0,0 +1,116 @@
+<script module>
+import Providers from '$shared/lib/storybook/Providers.svelte';
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import FontSampler from './FontSampler.svelte';
+
+const { Story } = defineMeta({
+    title: 'Features/FontSampler',
+    component: FontSampler,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Displays a sample text with a given font in a contenteditable element. Visual design matches FontCard: sharp corners, brand hover accent, header stats showing font properties (size, weight, line height, letter spacing). Staggered entrance animation based on index.',
+            },
+            story: { inline: false },
+        },
+    },
+    argTypes: {
+        font: {
+            control: 'object',
+            description: 'Font information object',
+        },
+        text: {
+            control: 'text',
+            description: 'Editable sample text (two-way bindable)',
+        },
+        index: {
+            control: { type: 'number', min: 0 },
+            description: 'Position index — drives the staggered entrance delay',
+        },
+    },
+});
+</script>
+
+<script lang="ts">
+import type { UnifiedFont } from '$entities/Font';
+import { controlManager } from '$features/SetupFont';
+
+// Mock fonts for testing
+const mockArial: UnifiedFont = {
+    id: 'arial',
+    name: 'Arial',
+    provider: 'google',
+    category: 'sans-serif',
+    subsets: ['latin'],
+    variants: ['400', '700'],
+    styles: {
+        regular: '',
+        bold: '',
+    },
+    metadata: {
+        cachedAt: Date.now(),
+        version: '1.0',
+        popularity: 1,
+    },
+    features: {
+        isVariable: false,
+    },
+};
+
+const mockGeorgia: UnifiedFont = {
+    id: 'georgia',
+    name: 'Georgia',
+    provider: 'google',
+    category: 'serif',
+    subsets: ['latin'],
+    variants: ['400', '700'],
+    styles: {
+        regular: '',
+        bold: '',
+    },
+    metadata: {
+        cachedAt: Date.now(),
+        version: '1.0',
+        popularity: 2,
+    },
+    features: {
+        isVariable: false,
+    },
+};
+</script>
+
+<Story
+    name="Default"
+    args={{
+        font: mockArial,
+        text: 'The quick brown fox jumps over the lazy dog',
+        index: 0,
+    }}
+>
+    {#snippet template(args)}
+        <Providers>
+            <div class="max-w-2xl mx-auto">
+                <FontSampler {...args} />
+            </div>
+        </Providers>
+    {/snippet}
+</Story>
+<Story
+    name="Long Text"
+    args={{
+        font: mockGeorgia,
+        text:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.',
+        index: 1,
+    }}
+>
+    {#snippet template(args)}
+        <Providers>
+            <div class="max-w-2xl mx-auto">
+                <FontSampler {...args} />
+            </div>
+        </Providers>
+    {/snippet}
+</Story>
diff --git a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
index feb3882..5adbffc 100644
--- a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
+++ b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
@@ -80,10 +80,9 @@ function toggleFilters() {
                 <div class="w-px h-5 bg-border-subtle"></div>
                 <div style:transform="scale({transform.current.scale})">
                     <IconButton onclick={toggleFilters}>
-                        {#snippet icon({ className })}
+                        {#snippet icon()}
                             <SlidersHorizontalIcon
                                 class={cn(
-                                    className,
                                     showFilters ? 'stroke-foreground stroke-3' : 'stroke-text-muted',
                                 )}
                             />