From 5946f66e697129674dc3af4d6989742c8b138a9f Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 27 Feb 2026 18:42:20 +0300
Subject: [PATCH] chore(FontSamler): rewrite component to use existed shared ui
 label wrappers

---
 .../ui/FontSampler/FontSampler.svelte         | 67 ++++++++++---------
 1 file changed, 35 insertions(+), 32 deletions(-)

diff --git a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
index 92daa6d..5d891c0 100644
--- a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
+++ b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
@@ -10,8 +10,12 @@ import {
 } from '$entities/Font';
 import { controlManager } from '$features/SetupFont';
 import {
+    Badge,
     ContentEditable,
+    Divider,
     Footnote,
+    Stat,
+    StatGroup,
 } from '$shared/ui';
 import { fly } from 'svelte/transition';
 
@@ -46,10 +50,12 @@ const stats = $derived([
     in:fly={{ y: 20, duration: 400, delay: index * 50 }}
     class="
         group relative
+        w-full h-full
         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')]
+        hover:shadow-brand/10
+        hover:shadow-[5px_5px_0px_0px]
         transition-all duration-200
         overflow-hidden
         flex flex-col
@@ -68,12 +74,11 @@ const stats = $derived([
         "
     >
         <!-- Left: index · name · type badge -->
-        <div class="flex items-center gap-2 sm:gap-4 min-w-0">
+        <div class="flex items-center gap-2 sm:gap-4 min-w-0 shrink-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>
+            <Divider orientation="vertical" class="h-3 shrink-0" />
 
             <span
                 class="font-primary font-bold text-sm text-swiss-black dark:text-neutral-200 leading-none tracking-tight uppercase truncate"
@@ -82,37 +87,34 @@ const stats = $derived([
             </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
-                    "
-                >
+                <Badge size="xs" variant="default" class="text-nowrap font-mono">
                     {fontType}
-                </span>
+                </Badge>
             {/if}
         </div>
 
         <!-- 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
+            class="
+                flex-1 min-w-0
+                hidden md:block @container
+                opacity-50 group-hover:opacity-100
+                transition-opacity duration-200 ml-4
+            "
+        >
+            <!-- Switches: narrow → 2×2, wide enough → 1 row -->
+            <div
+                class="
+                    max-w-64 ml-auto
+                    grid grid-cols-2 gap-x-3 gap-y-2
+                    @[160px]:grid-cols-4 @[160px]:gap-y-0
+                    items-center
+                "
+            >
+                {#each stats as stat}
+                    <Stat label={stat.label} value={stat.value} />
+                {/each}
+            </div>
         </div>
     </div>
 
@@ -143,10 +145,11 @@ const stats = $derived([
     <!-- ── Red hover line ─────────────────────────────────────────────── -->
     <div
         class="
-            absolute bottom-0 left-0
+            absolute bottom-0 left-0 right-0
             w-full h-0.5 bg-brand
             scale-x-0 group-hover:scale-x-100
-            transition-transform origin-left duration-300
+            transition-transform cubic-bezier(0.25, 0.1, 0.25, 1) origin-left duration-400
+            z-10
         "
     >
     </div>