From 55b27973a2be259a550b8f667fb67f3853a86302 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 18 Feb 2026 17:00:25 +0300
Subject: [PATCH] feat(ComparisonSlider): add selected fonts name for mobile
 controls and labels everywhere

---
 .../components/Controls.svelte                | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
index 7ca3f86..452f9ee 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
@@ -11,6 +11,7 @@ import { getFontUrl } from '$entities/Font/lib';
 import type { ResponsiveManager } from '$shared/lib';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import { SidebarMenu } from '$shared/ui';
+import { Label } from '$shared/ui';
 import Drawer from '$shared/ui/Drawer/Drawer.svelte';
 import { comparisonStore } from '$widgets/ComparisonSlider/model';
 import { getContext } from 'svelte';
@@ -71,19 +72,29 @@ $effect(() => {
 {#if responsive.isMobile}
     <Drawer>
         {#snippet trigger({ onClick })}
-            <div class={cn('absolute bottom-2 inset-x-0 z-50')}>
+            <div class={cn('absolute bottom-0.5 left-1/2 -translate-x-1/2 z-50')}>
                 <ToggleMenuButton bind:isActive={visible} {onClick} />
             </div>
         {/snippet}
         {#snippet content({ className })}
+            <div class="w-full pt-4 grid grid-cols-[1fr_min-content_1fr] gap-2 items-center justify-center">
+                <div class="uppercase text-indigo-500 ml-auto font-semibold tracking-tight text-[0.825rem] whitespace-nowrap">
+                    {fontB?.name ?? 'typeface_01'}
+                </div>
+                <div class="w-px h-2.5 bg-gray-400/50"></div>
+                <div class="uppercase text-neutral-950 mr-auto font-semibold tracking-tight text-[0.825rem] whitespace-nowrap">
+                    {fontA?.name ?? 'typeface_02'}
+                </div>
+            </div>
             <div class={cn(className, 'flex flex-col gap-2 h-[60vh]')}>
+                <Label class="mb-2" text="Available Fonts" align="center" />
+
                 <div class="h-full overflow-hidden">
                     <FontList />
                 </div>
+                <Label class="mb-2" text="Typography Controls" align="center" />
 
-                <div class="relative flex w-auto border-b border-gray-400/50 px-2 ml-4 mr-8 lg:mr-10 flex-shrink-0">
-                </div>
-                <div class="mr-4 sm:mr-6 flex-shrink-0">
+                <div class="mx-4 flex-shrink-0">
                     <TypographyControls />
                 </div>
             </div>
@@ -92,7 +103,7 @@ $effect(() => {
 {:else}
     <SidebarMenu
         class={cn(
-            'w-96 flex flex-col h-full pl-4 lg:pl-6 py-4 sm:py-6 sm:pt-12 gap-4 sm:gap-6 pointer-events-auto overflow-hidden',
+            'w-96 flex flex-col h-full pl-4 lg:pl-6 py-4 sm:py-6 sm:pt-12 gap-0 sm:gap-0 pointer-events-auto overflow-hidden',
             'relative h-full transition-all duration-700 ease-out',
             className,
         )}
@@ -102,15 +113,17 @@ $effect(() => {
     >
         {#snippet action()}
             <!-- Always-visible mode switch -->
-            <div class={cn('absolute top-4 left-0 z-50', visible && 'w-full')}>
+            <div class={cn('absolute top-2 left-0 z-50', visible && 'w-full')}>
                 <ToggleMenuButton bind:isActive={visible} onClick={handleToggle} />
             </div>
         {/snippet}
-        <div class="h-2/3 overflow-hidden">
+        <Label class="mb-2 mr-4 lg:mr-6" text="Available Fonts" align="left" />
+
+        <div class="mb-2 h-2/3 overflow-hidden">
             <FontList />
         </div>
+        <Label class="mb-2 mr-4 lg:mr-6" text="Typography Controls" align="left" />
 
-        <div class="relative flex w-auto border-b border-gray-400/50 px-2 ml-4 mr-8 lg:mr-10"></div>
         <div class="mr-4 sm:mr-6">
             <TypographyControls />
         </div>