From 2d397e7ca79db25fcba7263343b0d9ce85e682df Mon Sep 17 00:00:00 2001
From: kastov <yk@sent.com>
Date: Sun, 29 Mar 2026 22:58:45 +0300
Subject: [PATCH] refactor: replace Menu.Item with ActionIcon and Tooltip for
 improved UI in node features

---
 .../get-active-sesions-on-node.feature.tsx    | 18 ++++++++-----
 .../get-node-linked-hosts.feature.tsx         | 26 ++++++++++--------
 .../get-node-users-usage.feature.tsx          | 27 ++++++++++---------
 .../nodes/base-node-form/base-node-form.tsx   |  8 ------
 .../node-details-card.widget.tsx              | 20 ++++++++++++++
 5 files changed, 61 insertions(+), 38 deletions(-)

diff --git a/src/features/ui/dashboard/nodes/get-active-sesions-on-node/get-active-sesions-on-node.feature.tsx b/src/features/ui/dashboard/nodes/get-active-sesions-on-node/get-active-sesions-on-node.feature.tsx
index 8cb477b9..25fbde10 100644
--- a/src/features/ui/dashboard/nodes/get-active-sesions-on-node/get-active-sesions-on-node.feature.tsx
+++ b/src/features/ui/dashboard/nodes/get-active-sesions-on-node/get-active-sesions-on-node.feature.tsx
@@ -1,7 +1,7 @@
+import { ActionIcon, Tooltip } from '@mantine/core'
 import { useTranslation } from 'react-i18next'
 import { useDisclosure } from '@mantine/hooks'
 import { TbRadar } from 'react-icons/tb'
-import { Menu } from '@mantine/core'
 
 import { NodeActiveSessionsDrawerWidget } from '@widgets/dashboard/nodes/node-active-sessions'
 
@@ -16,12 +16,16 @@ export function GetActiveSessionsOnNodeFeature(props: IProps) {
 
     return (
         <>
-            <Menu.Item
-                leftSection={<TbRadar size="16px" />}
-                onClick={activeSessionsModalHandlers.open}
-            >
-                {t('get-user-usage.feature.active-sessions')}
-            </Menu.Item>
+            <Tooltip label={t('get-user-usage.feature.active-sessions')}>
+                <ActionIcon
+                    color="indigo"
+                    onClick={activeSessionsModalHandlers.open}
+                    size="lg"
+                    variant="soft"
+                >
+                    <TbRadar size="22px" />
+                </ActionIcon>
+            </Tooltip>
 
             <NodeActiveSessionsDrawerWidget
                 nodeUuid={nodeUuid}
diff --git a/src/features/ui/dashboard/nodes/get-node-linked-hosts/get-node-linked-hosts.feature.tsx b/src/features/ui/dashboard/nodes/get-node-linked-hosts/get-node-linked-hosts.feature.tsx
index aa0a5efa..c3c3e921 100644
--- a/src/features/ui/dashboard/nodes/get-node-linked-hosts/get-node-linked-hosts.feature.tsx
+++ b/src/features/ui/dashboard/nodes/get-node-linked-hosts/get-node-linked-hosts.feature.tsx
@@ -1,6 +1,6 @@
+import { ActionIcon, Tooltip } from '@mantine/core'
 import { useTranslation } from 'react-i18next'
 import { TbServerCog } from 'react-icons/tb'
-import { Menu } from '@mantine/core'
 import { memo } from 'react'
 
 import { MODALS, useModalsStoreOpenWithData } from '@entities/dashboard/modal-store'
@@ -14,16 +14,20 @@ const GetNodeLinkedHostsFeatureComponent = (props: IProps) => {
     const openModalWithData = useModalsStoreOpenWithData()
 
     return (
-        <Menu.Item
-            leftSection={<TbServerCog size="16px" />}
-            onClick={() => {
-                openModalWithData(MODALS.SHOW_NODE_LINKED_HOSTS_DRAWER, {
-                    nodeUuid
-                })
-            }}
-        >
-            {t('get-node-linked-hosts.feature.linked-hosts')}
-        </Menu.Item>
+        <Tooltip label={t('get-node-linked-hosts.feature.linked-hosts')}>
+            <ActionIcon
+                color="cyan"
+                onClick={() => {
+                    openModalWithData(MODALS.SHOW_NODE_LINKED_HOSTS_DRAWER, {
+                        nodeUuid
+                    })
+                }}
+                size="lg"
+                variant="soft"
+            >
+                <TbServerCog size="22px" />
+            </ActionIcon>
+        </Tooltip>
     )
 }
 
diff --git a/src/features/ui/dashboard/nodes/get-node-users-usage/get-node-users-usage.feature.tsx b/src/features/ui/dashboard/nodes/get-node-users-usage/get-node-users-usage.feature.tsx
index 8fe0312f..fb11def4 100644
--- a/src/features/ui/dashboard/nodes/get-node-users-usage/get-node-users-usage.feature.tsx
+++ b/src/features/ui/dashboard/nodes/get-node-users-usage/get-node-users-usage.feature.tsx
@@ -1,6 +1,6 @@
+import { ActionIcon, Tooltip } from '@mantine/core'
 import { PiChartBarDuotone } from 'react-icons/pi'
 import { useTranslation } from 'react-i18next'
-import { Menu } from '@mantine/core'
 import { memo } from 'react'
 
 import { MODALS, useModalsStoreOpenWithData } from '@entities/dashboard/modal-store'
@@ -14,17 +14,20 @@ const GetNodeUsersUsageFeatureComponent = (props: IProps) => {
     const openModalWithData = useModalsStoreOpenWithData()
 
     return (
-        <Menu.Item
-            color="grape"
-            leftSection={<PiChartBarDuotone size="16px" />}
-            onClick={() => {
-                openModalWithData(MODALS.SHOW_NODE_USERS_USAGE_DRAWER, {
-                    nodeUuid
-                })
-            }}
-        >
-            {t('get-user-usage.feature.show-usage')}
-        </Menu.Item>
+        <Tooltip label={t('get-user-usage.feature.show-usage')}>
+            <ActionIcon
+                color="indigo"
+                onClick={() => {
+                    openModalWithData(MODALS.SHOW_NODE_USERS_USAGE_DRAWER, {
+                        nodeUuid
+                    })
+                }}
+                size="lg"
+                variant="soft"
+            >
+                <PiChartBarDuotone size="22px" />
+            </ActionIcon>
+        </Tooltip>
     )
 }
 
diff --git a/src/shared/ui/forms/nodes/base-node-form/base-node-form.tsx b/src/shared/ui/forms/nodes/base-node-form/base-node-form.tsx
index 82e89f78..7783f089 100644
--- a/src/shared/ui/forms/nodes/base-node-form/base-node-form.tsx
+++ b/src/shared/ui/forms/nodes/base-node-form/base-node-form.tsx
@@ -13,10 +13,7 @@ import { motion } from 'framer-motion'
 import { ReactNode } from 'react'
 import { t } from 'i18next'
 
-import { GetActiveSessionsOnNodeFeature } from '@features/ui/dashboard/nodes/get-active-sesions-on-node'
 import { ToggleNodeStatusButtonFeature } from '@features/ui/dashboard/nodes/toggle-node-status-button'
-import { GetNodeLinkedHostsFeature } from '@features/ui/dashboard/nodes/get-node-linked-hosts'
-import { GetNodeUsersUsageFeature } from '@features/ui/dashboard/nodes/get-node-users-usage'
 import { RestartNodeButtonFeature } from '@features/ui/dashboard/nodes/restart-node-button'
 import { ResetNodeTrafficFeature } from '@features/ui/dashboard/nodes/reset-node-traffic'
 import { ModalAccordionWidget } from '@widgets/dashboard/nodes/modal-accordeon-widget'
@@ -208,11 +205,6 @@ export const BaseNodeForm = <T extends UpdateNodeCommand.Request>(props: IProps<
 
                             <RestartNodeButtonFeature handleClose={handleClose} node={node} />
                             <ToggleNodeStatusButtonFeature handleClose={handleClose} node={node} />
-                            <Menu.Divider />
-                            <Menu.Label>{t('base-node-form.quick-actions')}</Menu.Label>
-                            <GetActiveSessionsOnNodeFeature nodeUuid={node.uuid} />
-                            <GetNodeUsersUsageFeature nodeUuid={node.uuid} />
-                            <GetNodeLinkedHostsFeature nodeUuid={node.uuid} />
                         </Menu.Dropdown>
                     </Menu>
                 )}
diff --git a/src/widgets/dashboard/nodes/node-details-card/node-details-card.widget.tsx b/src/widgets/dashboard/nodes/node-details-card/node-details-card.widget.tsx
index d9ac56f3..b64fe3aa 100644
--- a/src/widgets/dashboard/nodes/node-details-card/node-details-card.widget.tsx
+++ b/src/widgets/dashboard/nodes/node-details-card/node-details-card.widget.tsx
@@ -2,6 +2,7 @@ import {
     ActionIcon,
     Badge,
     Box,
+    Divider,
     Group,
     Loader,
     Paper,
@@ -22,6 +23,9 @@ import { TbPower, TbWifi, TbWifiOff } from 'react-icons/tb'
 import { memo, useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { GetActiveSessionsOnNodeFeature } from '@features/ui/dashboard/nodes/get-active-sesions-on-node'
+import { GetNodeLinkedHostsFeature } from '@features/ui/dashboard/nodes/get-node-linked-hosts'
+import { GetNodeUsersUsageFeature } from '@features/ui/dashboard/nodes/get-node-users-usage'
 import { getNodeResetDaysUtil, getXrayUptimeUtil } from '@shared/utils/time-utils'
 import { QueryKeys, useDisableNode, useEnableNode } from '@shared/api/hooks'
 import { BaseOverlayHeader } from '@shared/ui/overlays/base-overlay-header'
@@ -243,6 +247,22 @@ export const NodeDetailsCardWidget = memo((props: IProps) => {
                     </Group>
                 </Group>
             </SectionCard.Section>
+
+            <SectionCard.Section>
+                <Group gap="xs" justify="flex-end">
+                    <Group gap="xs" justify="center">
+                        <GetNodeLinkedHostsFeature nodeUuid={node.uuid} />
+                    </Group>
+
+                    <Divider opacity={0.3} orientation="vertical" />
+
+                    <Group gap="xs" justify="center">
+                        <GetNodeUsersUsageFeature nodeUuid={node.uuid} />
+                        <GetActiveSessionsOnNodeFeature nodeUuid={node.uuid} />
+                    </Group>
+                </Group>
+            </SectionCard.Section>
+
             <SectionCard.Section>
                 <Box>
                     <Group gap="xs" justify="space-between" mb={6}>