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

---
 .../SetupFont/ui/TypographyMenu.svelte        | 137 ++++++------------
 1 file changed, 48 insertions(+), 89 deletions(-)

diff --git a/src/features/SetupFont/ui/TypographyMenu.svelte b/src/features/SetupFont/ui/TypographyMenu.svelte
index 9d8d6ba..db82f82 100644
--- a/src/features/SetupFont/ui/TypographyMenu.svelte
+++ b/src/features/SetupFont/ui/TypographyMenu.svelte
@@ -1,25 +1,16 @@
 <!--
     Component: TypographyMenu
-    Provides a menu for selecting and configuring typography settings
-    - On mobile the menu is displayed as a drawer
+    Floating controls bar for typography settings.
+    Warm surface, sharp corners, Settings icon header, dividers between units.
+    Mobile: same bar with overflow-x-auto — no drawer.
 -->
 <script lang="ts">
 import type { ResponsiveManager } from '$shared/lib';
-import {
-    Content as ItemContent,
-    Root as ItemRoot,
-} from '$shared/shadcn/ui/item';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
-import {
-    ComboControlV2,
-    Drawer,
-    IconButton,
-} from '$shared/ui';
-import { Label } from '$shared/ui';
-import SlidersIcon from '@lucide/svelte/icons/sliders-vertical';
+import { ComboControl } from '$shared/ui';
+import Settings2Icon from '@lucide/svelte/icons/settings-2';
 import { getContext } from 'svelte';
-import { cubicOut } from 'svelte/easing';
-import { crossfade } from 'svelte/transition';
+import { fly } from 'svelte/transition';
 import {
     MULTIPLIER_L,
     MULTIPLIER_M,
@@ -33,28 +24,14 @@ interface Props {
 }
 
 const { class: className, hidden = false }: Props = $props();
-const responsive = getContext<ResponsiveManager>('responsive');
 
-const [send, receive] = crossfade({
-    duration: 300,
-    easing: cubicOut,
-    fallback(node, params) {
-        // If it can't find a pair, it falls back to a simple fade/slide
-        return {
-            duration: 300,
-            css: t => `opacity: ${t}; transform: translateY(${(1 - t) * 10}px);`,
-        };
-    },
-});
+const responsive = getContext<ResponsiveManager>('responsive');
 
 /**
  * Sets the common font size multiplier based on the current responsive state.
  */
 $effect(() => {
-    if (!responsive) {
-        return;
-    }
-
+    if (!responsive) return;
     switch (true) {
         case responsive.isMobile:
             controlManager.multiplier = MULTIPLIER_S;
@@ -67,68 +44,50 @@ $effect(() => {
             break;
         default:
             controlManager.multiplier = MULTIPLIER_L;
-            break;
     }
 });
 </script>
 
 <div
-    class={cn(
-        'w-auto max-screen z-10 flex justify-center',
-        hidden && 'hidden',
-        className,
-    )}
-    in:receive={{ key: 'panel' }}
-    out:send={{ key: 'panel' }}
+    class={cn('w-full md:w-auto', hidden && 'hidden', className)}
+    in:fly={{ y: 100, duration: 400 }}
 >
-    {#if responsive.isMobile}
-        <Drawer>
-            {#snippet trigger({ onClick })}
-                <IconButton onclick={onClick}>
-                    {#snippet icon({ className })}
-                        <SlidersIcon class={className} />
-                    {/snippet}
-                </IconButton>
-            {/snippet}
-            {#snippet content({ className })}
-                <Label
-                    class="mt-6 mb-12 px-2"
-                    text="Typography Controls"
-                    align="center"
-                />
-                <div class={cn(className, 'flex flex-col gap-8')}>
-                    {#each controlManager.controls as control (control.id)}
-                        <ComboControlV2
-                            control={control.instance}
-                            orientation="horizontal"
-                            label={control.controlLabel}
-                            reduced
-                        />
-                    {/each}
-                </div>
-            {/snippet}
-        </Drawer>
-    {:else}
-        <ItemRoot
-            variant="outline"
-            class="w-full sm:w-auto max-w-full sm:max-w-max p-2 sm:p-2.5 rounded-xl sm:rounded-2xl backdrop-blur-lg"
-        >
-            <ItemContent class="flex flex-row justify-center items-center max-w-full sm:max-w-max">
-                <div class="sm:py-2 sm:px-10 flex flex-row items-center gap-2">
-                    <div class="flex flex-row gap-3">
-                        {#each controlManager.controls as control (control.id)}
-                            <ComboControlV2
-                                control={control.instance}
-                                increaseLabel={control.increaseLabel}
-                                decreaseLabel={control.decreaseLabel}
-                                controlLabel={control.controlLabel}
-                                orientation="vertical"
-                                showScale={false}
-                            />
-                        {/each}
-                    </div>
-                </div>
-            </ItemContent>
-        </ItemRoot>
-    {/if}
+    <div
+        class={cn(
+            'flex items-center gap-1 md:gap-2 p-1.5 md:p-2',
+            'bg-[#f3f0e9]/95 dark:bg-[#121212]/95 backdrop-blur-xl',
+            'border border-black/5 dark:border-white/10',
+            'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.1)]',
+            'rounded-none ring-1 ring-black/5 dark:ring-white/5',
+            responsive?.isMobile && 'overflow-x-auto',
+        )}
+    >
+        <!-- Header: icon + label -->
+        <div class="px-2 md:px-3 flex items-center gap-1.5 md:gap-2 border-r border-black/5 dark:border-white/10 mr-1 text-[#1a1a1a] dark:text-[#e5e5e5] shrink-0">
+            <Settings2Icon
+                size={responsive?.isMobile ? 12 : 14}
+                class="text-[#ff3b30]"
+            />
+            <span
+                class="text-[0.5625rem] md:text-[0.625rem] font-mono uppercase tracking-widest font-bold hidden sm:inline whitespace-nowrap"
+            >
+                GLOBAL_CONTROLS
+            </span>
+        </div>
+
+        <!-- Controls with dividers between each -->
+        {#each controlManager.controls as control, i (control.id)}
+            {#if i > 0}
+                <div class="w-px h-6 md:h-8 bg-black/5 dark:bg-white/10 mx-0.5 md:mx-1 shrink-0"></div>
+            {/if}
+
+            <ComboControl
+                control={control.instance}
+                label={control.controlLabel}
+                increaseLabel={control.increaseLabel}
+                decreaseLabel={control.decreaseLabel}
+                controlLabel={control.controlLabel}
+            />
+        {/each}
+    </div>
 </div>