refactor: replace Menu.Item with ActionIcon and Tooltip for improved UI in node features

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}

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>
     )
 }
 

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>
     )
 }
 

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>
                 )}

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}>