From 13e114fafedbc33a564274139749befe98b828a7 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 26 Jan 2026 12:47:10 +0300
Subject: [PATCH] feat(TypographyMenu): add appearance/disappearance animation

---
 .../ui/TypographyMenu.svelte                  | 38 +++++++++++++++----
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/widgets/TypographySettings/ui/TypographyMenu.svelte b/src/widgets/TypographySettings/ui/TypographyMenu.svelte
index eef8a18..8437736 100644
--- a/src/widgets/TypographySettings/ui/TypographyMenu.svelte
+++ b/src/widgets/TypographySettings/ui/TypographyMenu.svelte
@@ -1,15 +1,37 @@
 <script lang="ts">
-import SetupFontMenu from '$features/SetupFont/ui/SetupFontMenu.svelte';
+import { SetupFontMenu } from '$features/SetupFont';
 import {
     Content as ItemContent,
     Root as ItemRoot,
 } from '$shared/shadcn/ui/item';
+
+import { displayedFontsStore } from '$features/DisplayFont';
+import { cubicOut } from 'svelte/easing';
+import { crossfade } from 'svelte/transition';
+
+const [send, receive] = crossfade({
+    duration: 400,
+    easing: cubicOut,
+    fallback(node, params) {
+        // If it can't find a pair, it falls back to a simple fade/slide
+        return {
+            duration: 400,
+            css: t => `opacity: ${t}; transform: translateY(${(1 - t) * 10}px);`,
+        };
+    },
+});
 </script>
 
-<div class="w-full p-2 backdrop-blur-2xl">
-    <ItemRoot variant="outline" class="w-full p-2.5">
-        <ItemContent class="flex flex-row justify-center items-center">
-            <SetupFontMenu />
-        </ItemContent>
-    </ItemRoot>
-</div>
+{#if displayedFontsStore.hasAnyFonts}
+    <div
+        class="w-auto fixed bottom-5 left-1/2 translate-x-[-50%] max-w-max z-10"
+        in:receive={{ key: 'panel' }}
+        out:send={{ key: 'panel' }}
+    >
+        <ItemRoot variant="outline" class="w-auto max-w-max p-2.5 rounded-2xl backdrop-blur-lg">
+            <ItemContent class="flex flex-row justify-center items-center max-w-max">
+                <SetupFontMenu />
+            </ItemContent>
+        </ItemRoot>
+    </div>
+{/if}