From 12718593e34cefae90a6a40956e30db73c447a0d Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 27 Feb 2026 12:42:18 +0300
Subject: [PATCH] feat(FontSampler): refactor component to align it with new
 design

---
 .../ui/FontSampler/FontSampler.svelte         | 161 +++++++++++-------
 1 file changed, 102 insertions(+), 59 deletions(-)

diff --git a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
index 0e43da1..92daa6d 100644
--- a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
+++ b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
@@ -1,6 +1,7 @@
 <!--
     Component: FontSampler
     Displays a sample text with a given font in a contenteditable element.
+    Visual design matches FontCard: sharp corners, red hover accent, header stats.
 -->
 <script lang="ts">
 import {
@@ -11,78 +12,115 @@ import { controlManager } from '$features/SetupFont';
 import {
     ContentEditable,
     Footnote,
-    // IconButton,
 } from '$shared/ui';
-// import XIcon from '@lucide/svelte/icons/x';
+import { fly } from 'svelte/transition';
 
 interface Props {
-    /**
-     * Font info
-     */
+    /** Font info */
     font: UnifiedFont;
-    /**
-     * Text to display
-     */
+    /** Editable sample text */
     text: string;
-    /**
-     * Index of the font sampler
-     */
+    /** Position index — drives the staggered entrance delay */
     index?: number;
-    /**
-     * Font settings
-     */
-    fontSize?: number;
-    lineHeight?: number;
-    letterSpacing?: number;
 }
 
-let { font, text = $bindable(), index = 0, ...restProps }: Props = $props();
+let { font, text = $bindable(), index = 0 }: Props = $props();
 
 const fontWeight = $derived(controlManager.weight);
 const fontSize = $derived(controlManager.renderedSize);
 const lineHeight = $derived(controlManager.height);
 const letterSpacing = $derived(controlManager.spacing);
+
+// Adjust the property name to match your UnifiedFont type
+const fontType = $derived((font as any).type ?? (font as any).category ?? '');
+
+const stats = $derived([
+    { label: 'SZ', value: `${fontSize}PX` },
+    { label: 'WGT', value: `${fontWeight}` },
+    { label: 'LH', value: lineHeight?.toFixed(2) },
+    { label: 'LTR', value: `${letterSpacing}` },
+]);
 </script>
 
 <div
+    in:fly={{ y: 20, duration: 400, delay: index * 50 }}
     class="
-        w-full h-full rounded-xl sm:rounded-2xl
+        group relative
+        bg-paper dark:bg-dark-card
+        border border-black/5 dark:border-white/10
+        hover:border-brand dark:hover:border-brand
+        hover:shadow-[5px_5px_0px_0px_theme('colors.brand')]
+        transition-all duration-200
+        overflow-hidden
         flex flex-col
-        bg-background-80
-        border border-border-muted
-        shadow-[0_1px_3px_rgba(0,0,0,0.04)]
-        relative overflow-hidden
+        min-h-60
+        rounded-none
     "
     style:font-weight={fontWeight}
 >
-    <div class="px-4 sm:px-5 md:px-6 py-2.5 sm:py-3 border-b border-border-subtle flex items-center justify-between">
-        <div class="flex items-center gap-2 sm:gap-2.5">
-            <Footnote>
-                typeface_{String(index).padStart(3, '0')}
-            </Footnote>
-            <div class="w-px h-2 sm:h-2.5 bg-border-subtle"></div>
-            <div class="font-bold text-foreground">
+    <!-- ── Header bar ─────────────────────────────────────────────────── -->
+    <div
+        class="
+            flex items-center justify-between
+            px-4 sm:px-5 md:px-6 py-3 sm:py-4
+            border-b border-black/5 dark:border-white/10
+            bg-paper dark:bg-dark-card
+        "
+    >
+        <!-- Left: index · name · type badge -->
+        <div class="flex items-center gap-2 sm:gap-4 min-w-0">
+            <span class="font-mono text-[0.625rem] tracking-widest text-neutral-400 uppercase leading-none shrink-0">
+                {String(index + 1).padStart(2, '0')}
+            </span>
+
+            <div class="w-px h-3 bg-black/10 dark:bg-white/10 shrink-0"></div>
+
+            <span
+                class="font-primary font-bold text-sm text-swiss-black dark:text-neutral-200 leading-none tracking-tight uppercase truncate"
+            >
                 {font.name}
-            </div>
+            </span>
+
+            {#if fontType}
+                <span
+                    class="
+                        hidden sm:inline-block shrink-0
+                        px-2 py-0.5
+                        border border-black/10 dark:border-white/10 rounded-full
+                        text-[0.5rem] font-secondary font-medium uppercase
+                        text-neutral-500 tracking-wide leading-none
+                    "
+                >
+                    {fontType}
+                </span>
+            {/if}
         </div>
 
-        <!--
-            <IconButton
-                onclick={removeSample}
-                class="w-5 h-5 rounded-full hover:bg-transparent flex items-center justify-center transition-colors group translate-x-1/2 cursor-pointer"
-            >
-                {#snippet icon({ className })}
-                    <XIcon class={className} />
-                {/snippet}
-            </IconButton>
-        -->
+        <!-- Right: stats, hidden on mobile, fade in on group hover -->
+        <div class="hidden md:flex items-center gap-3 lg:gap-4 opacity-50 group-hover:opacity-100 transition-opacity duration-200 shrink-0 ml-4">
+            {#each stats as stat, i}
+                <div class="flex items-center gap-1">
+                    <span class="font-mono text-[0.5rem] tracking-widest text-neutral-400 uppercase">
+                        {stat.label}:
+                    </span>
+                    <span
+                        class="font-mono text-[0.5rem] font-bold tracking-widest text-swiss-black dark:text-neutral-200 uppercase"
+                    >
+                        {stat.value}
+                    </span>
+                </div>
+                {#if i < stats.length - 1}
+                    <div class="w-px h-2 bg-black/10 dark:bg-white/10"></div>
+                {/if}
+            {/each}
+        </div>
     </div>
 
-    <div class="p-4 sm:p-5 md:p-8 relative z-10">
+    <!-- ── Main content area ──────────────────────────────────────────── -->
+    <div class="flex-1 p-4 sm:p-5 md:p-8 flex items-center overflow-hidden bg-paper dark:bg-dark-card relative z-10">
         <FontApplicator {font} weight={fontWeight}>
             <ContentEditable
                 bind:text
-                {...restProps}
                 {fontSize}
                 {lineHeight}
                 {letterSpacing}
@@ -90,21 +128,26 @@ const letterSpacing = $derived(controlManager.spacing);
         </FontApplicator>
     </div>
 
-    <div class="px-4 sm:px-5 md:px-6 py-1.5 sm:py-2 border-t border-border-subtle w-full flex flex-row gap-2 sm:gap-4 bg-background mt-auto">
-        <Footnote class="text-[7px] sm:text-[8px] tracking-wider ml-auto">
-            SZ:{fontSize}PX
-        </Footnote>
-        <div class="w-px h-2 sm:h-2.5 self-center bg-border-subtle hidden sm:block"></div>
-        <Footnote class="text-[7px] sm:text-[8px] tracking-wider">
-            WGT:{fontWeight}
-        </Footnote>
-        <div class="w-px h-2 sm:h-2.5 self-center bg-border-subtle hidden sm:block"></div>
-        <Footnote class="text-[7px] sm:text-[8px] tracking-wider">
-            LH:{lineHeight?.toFixed(2)}
-        </Footnote>
-        <div class="w-px h-2 sm:h-2.5 self-center bg-border-subtle hidden sm:block"></div>
-        <Footnote class="text-[0.4375rem] sm:text-[0.5rem] tracking-wider">
-            LTR:{letterSpacing}
-        </Footnote>
+    <!-- ── Mobile stats footer (md:hidden — header stats take over above) -->
+    <div class="md:hidden px-4 sm:px-5 py-1.5 sm:py-2 border-t border-black/5 dark:border-white/10 flex gap-2 sm:gap-4 bg-paper dark:bg-dark-card mt-auto">
+        {#each stats as stat, i}
+            <Footnote class="text-[0.4375rem] sm:text-[0.5rem] tracking-wider {i === 0 ? 'ml-auto' : ''}">
+                {stat.label}:{stat.value}
+            </Footnote>
+            {#if i < stats.length - 1}
+                <div class="w-px h-2 sm:h-2.5 self-center bg-black/10 dark:bg-white/10 hidden sm:block"></div>
+            {/if}
+        {/each}
+    </div>
+
+    <!-- ── Red hover line ─────────────────────────────────────────────── -->
+    <div
+        class="
+            absolute bottom-0 left-0
+            w-full h-0.5 bg-brand
+            scale-x-0 group-hover:scale-x-100
+            transition-transform origin-left duration-300
+        "
+    >
     </div>
 </div>