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))]">
+<div class="grid gap-2 grid-cols-[repeat(auto-fit,minmax(500px,1fr))] will-change-tranform transition-transform content">
-    {#each displayedFontsStore.fonts as font (font.id)}
+    {#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>

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
+        w-full h-full rounded-2xl
-        bg-white border border-slate-200
+        flex flex-col
-        shadow-sm dark:border-slate-800 dark:bg-slate-950
+        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">
+    <div class="px-6 py-3 border-b border-gray-200/60 flex items-center justify-between">
-        <span class="text-[0.5rem] font-mono uppercase tracking-widest text-slate-900">
+        <div class="flex items-center gap-2.5">
-            {font.name}
+            <span class="font-mono text-[9px] uppercase tracking-[0.25em] text-gray-500 font-medium">
-        </span>
+                typeface_{String(index).padStart(3, '0')}
-        <IconButton onclick={removeSample}>
+            </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>