From 730eba138d544ae8641899a71971f7c51bc4a8f4 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 30 Jan 2026 17:42:06 +0300
Subject: [PATCH] feat(FontSampler): refactor styles of FontSampler component

---
 .../ui/FontDisplay/FontDisplay.svelte         |  6 +-
 .../ui/FontSampler/FontSampler.svelte         | 60 +++++++++++++++----
 2 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/src/features/DisplayFont/ui/FontDisplay/FontDisplay.svelte b/src/features/DisplayFont/ui/FontDisplay/FontDisplay.svelte
index 0cc8940..c6d8afc 100644
--- a/src/features/DisplayFont/ui/FontDisplay/FontDisplay.svelte
+++ b/src/features/DisplayFont/ui/FontDisplay/FontDisplay.svelte
@@ -9,10 +9,10 @@ import { displayedFontsStore } from '../../model';
 import FontSampler from '../FontSampler/FontSampler.svelte';
 </script>
 
-<div class="grid gap-2 grid-cols-[repeat(auto-fit,minmax(500px,1fr))]">
-    {#each displayedFontsStore.fonts as font (font.id)}
+<div class="grid gap-2 grid-cols-[repeat(auto-fit,minmax(500px,1fr))] will-change-tranform transition-transform content">
+    {#each displayedFontsStore.fonts as font, index (font.id)}
         <div animate:flip={{ delay: 0, duration: 400, easing: quintOut }}>
-            <FontSampler font={font} bind:text={displayedFontsStore.text} />
+            <FontSampler font={font} bind:text={displayedFontsStore.text} index={index} />
         </div>
     {/each}
 </div>
diff --git a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
index eba95fe..ce75329 100644
--- a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
+++ b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
@@ -9,12 +9,11 @@ import {
     selectedFontsStore,
 } from '$entities/Font';
 import { controlManager } from '$features/SetupFont';
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import {
     ContentEditable,
     IconButton,
 } from '$shared/ui';
-import MinusIcon from '@lucide/svelte/icons/minus';
+import XIcon from '@lucide/svelte/icons/x';
 
 interface Props {
     /**
@@ -25,6 +24,10 @@ interface Props {
      * Text to display
      */
     text: string;
+    /**
+     * Index of the font sampler
+     */
+    index?: number;
     /**
      * Font settings
      */
@@ -36,6 +39,7 @@ interface Props {
 let {
     font,
     text = $bindable(),
+    index = 0,
     ...restProps
 }: Props = $props();
 
@@ -51,23 +55,37 @@ function removeSample() {
 
 <div
     class="
-        w-full h-full rounded-xl
-        bg-white border border-slate-200
-        shadow-sm dark:border-slate-800 dark:bg-slate-950
+        w-full h-full rounded-2xl
+        flex flex-col
+        backdrop-blur-md bg-white/80
+        border border-gray-300/50
+        shadow-[0_1px_3px_rgba(0,0,0,0.04)]
+        relative overflow-hidden
     "
     style:font-weight={fontWeight}
 >
-    <div class="mx-3 p-1.5 pr-0 border-b border-slate-200 flex items-center justify-between">
-        <span class="text-[0.5rem] font-mono uppercase tracking-widest text-slate-900">
-            {font.name}
-        </span>
-        <IconButton onclick={removeSample}>
+    <div class="px-6 py-3 border-b border-gray-200/60 flex items-center justify-between">
+        <div class="flex items-center gap-2.5">
+            <span class="font-mono text-[9px] uppercase tracking-[0.25em] text-gray-500 font-medium">
+                typeface_{String(index).padStart(3, '0')}
+            </span>
+            <div class="w-px h-2.5 bg-gray-300/60"></div>
+            <span class="font-mono text-[10px] tracking-[0.15em] font-bold uppercase text-gray-900">
+                {font.name}
+            </span>
+        </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 })}
-                <MinusIcon class={cn(className, 'stroke-red-500 group-hover:stroke-red-500')} />
+                <XIcon class={className} />
             {/snippet}
         </IconButton>
     </div>
-    <div class="p-6">
+
+    <div class="p-8 relative z-10">
         <FontApplicator id={font.id} name={font.name}>
             <ContentEditable
                 bind:text={text}
@@ -78,4 +96,22 @@ function removeSample() {
             />
         </FontApplicator>
     </div>
+
+    <div class="px-6 py-2 border-t border-gray-200/40 w-full flex gap-4 bg-gray-50/30 mt-auto">
+        <span class="text-[8px] font-mono text-gray-400 uppercase tracking-wider ml-auto">
+            SZ:{fontSize}PX
+        </span>
+        <div class="w-px h-2.5 self-center bg-gray-300/40"></div>
+        <span class="text-[8px] font-mono text-gray-400 uppercase tracking-wider">
+            WGT:{fontWeight}
+        </span>
+        <div class="w-px h-2.5 self-center bg-gray-300/40"></div>
+        <span class="text-[8px] font-mono text-gray-400 uppercase tracking-wider">
+            LH:{lineHeight?.toFixed(2)}
+        </span>
+        <div class="w-px h-2.5 self-center bg-gray-300/40"></div>
+        <span class="text-[8px] font-mono text-gray-400 uppercase tracking-wider">
+            LTR:{letterSpacing}
+        </span>
+    </div>
 </div>