From f0aa89097e594e3ac77db63f7390948daf5a833c Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 27 Feb 2026 18:39:09 +0300
Subject: [PATCH] feat(TypographyMenu): rewrite from hidden class to if based
 rendering

---
 .../SetupFont/ui/TypographyMenu.svelte        | 82 ++++++++++---------
 1 file changed, 42 insertions(+), 40 deletions(-)

diff --git a/src/features/SetupFont/ui/TypographyMenu.svelte b/src/features/SetupFont/ui/TypographyMenu.svelte
index db82f82..3150ada 100644
--- a/src/features/SetupFont/ui/TypographyMenu.svelte
+++ b/src/features/SetupFont/ui/TypographyMenu.svelte
@@ -10,6 +10,7 @@ import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import { ComboControl } from '$shared/ui';
 import Settings2Icon from '@lucide/svelte/icons/settings-2';
 import { getContext } from 'svelte';
+import { cubicOut } from 'svelte/easing';
 import { fly } from 'svelte/transition';
 import {
     MULTIPLIER_L,
@@ -47,47 +48,48 @@ $effect(() => {
     }
 });
 </script>
-
-<div
-    class={cn('w-full md:w-auto', hidden && 'hidden', className)}
-    in:fly={{ y: 100, duration: 400 }}
->
+{#if !hidden}
     <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',
-        )}
+        class={cn('w-full md:w-auto', className)}
+        transition:fly={{ y: 100, duration: 200, easing: cubicOut }}
     >
-        <!-- 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
+            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>
-
-        <!-- 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>
+{/if}