From aa087c5c3ee8a1a03972b42a3c6d65df3661c0a2 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 6 Jan 2026 12:23:50 +0300
Subject: [PATCH] fix: move Item component from feature to Widget for FontMenu
 may be used in different places of the app

---
 .../SetupFont/ui/SetupFontMenu.svelte         | 84 +++++++++----------
 .../ui/TypographyMenu.svelte                  |  8 +-
 2 files changed, 45 insertions(+), 47 deletions(-)

diff --git a/src/features/SetupFont/ui/SetupFontMenu.svelte b/src/features/SetupFont/ui/SetupFontMenu.svelte
index 67a440c..383c928 100644
--- a/src/features/SetupFont/ui/SetupFontMenu.svelte
+++ b/src/features/SetupFont/ui/SetupFontMenu.svelte
@@ -12,48 +12,44 @@ const fontWeight = $derived($fontWeightStore);
 const lineHeight = $derived($lineHeightStore);
 </script>
 
-<div class="w-full p-2">
-    <Item.Root variant="outline" class="w-full p-2.5">
-        <Item.Content class="flex flex-row items-center">
-            <Sidebar.Trigger />
-            <Separator orientation="vertical" class="h-full" />
-            <ComboControl
-                value={fontSize.value}
-                minValue={fontSize.min}
-                maxValue={fontSize.max}
-                onChange={fontSizeStore.setValue}
-                onIncrease={fontSizeStore.increase}
-                onDecrease={fontSizeStore.decrease}
-                increaseDisabled={fontSizeStore.isAtMax()}
-                decreaseDisabled={fontSizeStore.isAtMin()}
-                increaseLabel="Increase Font Size"
-                decreaseLabel="Decrease Font Size"
-            />
-            <ComboControl
-                value={fontWeight.value}
-                minValue={fontWeight.min}
-                maxValue={fontWeight.max}
-                onChange={fontWeightStore.setValue}
-                onIncrease={fontWeightStore.increase}
-                onDecrease={fontWeightStore.decrease}
-                increaseDisabled={fontWeightStore.isAtMax()}
-                decreaseDisabled={fontWeightStore.isAtMin()}
-                increaseLabel="Increase Font Weight"
-                decreaseLabel="Decrease Font Weight"
-            />
-            <ComboControl
-                value={lineHeight.value}
-                minValue={lineHeight.min}
-                maxValue={lineHeight.max}
-                step={lineHeight.step}
-                onChange={lineHeightStore.setValue}
-                onIncrease={lineHeightStore.increase}
-                onDecrease={lineHeightStore.decrease}
-                increaseDisabled={lineHeightStore.isAtMax()}
-                decreaseDisabled={lineHeightStore.isAtMin()}
-                increaseLabel="Increase Line Height"
-                decreaseLabel="Decrease Line Height"
-            />
-        </Item.Content>
-    </Item.Root>
+<div class="w-full p-2 flex flex-row items-center">
+    <Sidebar.Trigger />
+    <Separator orientation="vertical" class="h-full" />
+    <ComboControl
+        value={fontSize.value}
+        minValue={fontSize.min}
+        maxValue={fontSize.max}
+        onChange={fontSizeStore.setValue}
+        onIncrease={fontSizeStore.increase}
+        onDecrease={fontSizeStore.decrease}
+        increaseDisabled={fontSizeStore.isAtMax()}
+        decreaseDisabled={fontSizeStore.isAtMin()}
+        increaseLabel="Increase Font Size"
+        decreaseLabel="Decrease Font Size"
+    />
+    <ComboControl
+        value={fontWeight.value}
+        minValue={fontWeight.min}
+        maxValue={fontWeight.max}
+        onChange={fontWeightStore.setValue}
+        onIncrease={fontWeightStore.increase}
+        onDecrease={fontWeightStore.decrease}
+        increaseDisabled={fontWeightStore.isAtMax()}
+        decreaseDisabled={fontWeightStore.isAtMin()}
+        increaseLabel="Increase Font Weight"
+        decreaseLabel="Decrease Font Weight"
+    />
+    <ComboControl
+        value={lineHeight.value}
+        minValue={lineHeight.min}
+        maxValue={lineHeight.max}
+        step={lineHeight.step}
+        onChange={lineHeightStore.setValue}
+        onIncrease={lineHeightStore.increase}
+        onDecrease={lineHeightStore.decrease}
+        increaseDisabled={lineHeightStore.isAtMax()}
+        decreaseDisabled={lineHeightStore.isAtMin()}
+        increaseLabel="Increase Line Height"
+        decreaseLabel="Decrease Line Height"
+    />
 </div>
diff --git a/src/widgets/TypographySettings/ui/TypographyMenu.svelte b/src/widgets/TypographySettings/ui/TypographyMenu.svelte
index 4398c5c..60b4f2c 100644
--- a/src/widgets/TypographySettings/ui/TypographyMenu.svelte
+++ b/src/widgets/TypographySettings/ui/TypographyMenu.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
 import SetupFontMenu from '$features/SetupFont/ui/SetupFontMenu.svelte';
 import * as Item from '$shared/shadcn/ui/item';
-import { Separator } from '$shared/shadcn/ui/separator/index';
-import * as Sidebar from '$shared/shadcn/ui/sidebar/index';
 </script>
 
 <div class="w-full p-2">
-    <SetupFontMenu />
+    <Item.Root variant="outline" class="w-full p-2.5">
+        <Item.Content>
+            <SetupFontMenu />
+        </Item.Content>
+    </Item.Root>
 </div>