feat(hosts): add node linking and enhance host form UI

- Adds multi-select field for linking nodes to hosts
- Converts host creation/editing modals to drawers
- Updates host card to display linked nodes with country flags
- Improves layout and responsiveness of host components
- Enhances form footer organization and button placement

Author: kastov

package-lock.json

@@ -59,7 +59,7 @@
     "@monaco-editor/react": "^4.7.0",
     "@noble/post-quantum": "^0.5.2",
     "@paralleldrive/cuid2": "2.2.2",
-    "@remnawave/backend-contract": "2.1.65",
+    "@remnawave/backend-contract": "2.1.67",
     "@stablelib/base64": "^2.0.1",
     "@stablelib/x25519": "^2.0.1",
     "@tabler/icons-react": "^3.35.0",

package.json

@@ -430,7 +430,9 @@
         "misc-settings": "Misc settings",
         "shuffle-host": "Shuffle Host",
         "mihomo-specific": "Mihomo Specific",
-        "enable-x25519mlkem768": "Enable x25519mlkem768"
+        "enable-x25519mlkem768": "Enable x25519mlkem768",
+        "pick-nodes-which-resolved-from-this-host-only-visual-assignment": "Pick nodes which resolved from this host. Only visual assignment.",
+        "nodes": "Nodes"
     },
     "base-node-form": {
         "country": "Country",
@@ -1654,5 +1656,16 @@
             "hourly-request-statistics": "Hourly Request Statistics",
             "no-hourly-data-available": "No hourly data available"
         }
+    },
+    "linked-hosts-drawer": {
+        "widget": {
+            "assigned-hosts": "Assigned hosts",
+            "no-hosts-assigned-to-this-node": "No hosts assigned to this node"
+        }
+    },
+    "get-node-linked-hosts": {
+        "feature": {
+            "linked-hosts": "Linked hosts"
+        }
     }
 }

public/locales/en/remnawave.json

@@ -16,6 +16,7 @@ export const MODALS = {
     CREATE_INFRA_BILLING_NODE_MODAL: 'CREATE_INFRA_BILLING_NODE_MODAL',
     EDIT_NODE_BY_UUID_MODAL: 'EDIT_NODE_BY_UUID_MODAL',
     SHOW_NODE_USERS_USAGE_DRAWER: 'SHOW_NODE_USERS_USAGE_DRAWER',
+    SHOW_NODE_LINKED_HOSTS_DRAWER: 'SHOW_NODE_LINKED_HOSTS_DRAWER',
     RENAME_SQUAD_OR_CONFIG_PROFILE_MODAL: 'RENAME_SQUAD_OR_CONFIG_PROFILE_MODAL',
     INTERNAL_SQUAD_ACCESSIBLE_NODES_DRAWER: 'INTERNAL_SQUAD_ACCESSIBLE_NODES_DRAWER',
     CONFIG_PROFILE_SHOW_INBOUNDS_DRAWER: 'CONFIG_PROFILE_SHOW_INBOUNDS_DRAWER'
@@ -38,6 +39,9 @@ export interface ModalInternalStates {
         name: string
         uuid: string
     }
+    SHOW_NODE_LINKED_HOSTS_DRAWER: {
+        nodeUuid: string
+    }
     SHOW_NODE_USERS_USAGE_DRAWER: {
         nodeUuid: string
     }

src/entities/dashboard/modal-store/modal-states.ts

@@ -0,0 +1,34 @@
+import { useTranslation } from 'react-i18next'
+import { TbServerCog } from 'react-icons/tb'
+import { Menu } from '@mantine/core'
+import { memo } from 'react'
+
+import { MODALS, useModalsStore } from '@entities/dashboard/modal-store'
+
+import { IProps } from './interfaces'
+
+const GetNodeLinkedHostsFeatureComponent = (props: IProps) => {
+    const { nodeUuid } = props
+    const { t } = useTranslation()
+
+    const { open: openModal, setInternalData } = useModalsStore()
+
+    return (
+        <Menu.Item
+            leftSection={<TbServerCog size="16px" />}
+            onClick={() => {
+                setInternalData({
+                    internalState: {
+                        nodeUuid
+                    },
+                    modalKey: MODALS.SHOW_NODE_LINKED_HOSTS_DRAWER
+                })
+                openModal(MODALS.SHOW_NODE_LINKED_HOSTS_DRAWER)
+            }}
+        >
+            {t('get-node-linked-hosts.feature.linked-hosts')}
+        </Menu.Item>
+    )
+}
+
+export const GetNodeLinkedHostsFeature = memo(GetNodeLinkedHostsFeatureComponent)

src/features/ui/dashboard/nodes/get-node-linked-hosts/get-node-linked-hosts.feature.tsx

@@ -0,0 +1 @@
+export * from './get-node-linked-hosts.feature'

src/features/ui/dashboard/nodes/get-node-linked-hosts/index.ts

@@ -0,0 +1 @@
+export * from './props.interface'

src/features/ui/dashboard/nodes/get-node-linked-hosts/interfaces/index.ts

@@ -0,0 +1,3 @@
+export interface IProps {
+    nodeUuid: string
+}

src/features/ui/dashboard/nodes/get-node-linked-hosts/interfaces/props.interface.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @stylistic/indent */
+
 import { useTranslation } from 'react-i18next'
 import { motion } from 'motion/react'
 import { Grid } from '@mantine/core'
@@ -21,7 +23,8 @@ export default function HostsPageComponent(props: IProps) {
         hostTags,
         isHostsLoading,
         isConfigProfilesLoading,
-        isHostTagsLoading
+        isHostTagsLoading,
+        isNodesLoading
     } = props
     const [selectedHosts, setSelectedHosts] = useState<string[]>([])
 
@@ -40,7 +43,10 @@ export default function HostsPageComponent(props: IProps) {
                 <Grid.Col span={12}>
                     <HostsPageHeaderWidget />
 
-                    {isHostsLoading || isConfigProfilesLoading || isHostTagsLoading ? (
+                    {isHostsLoading ||
+                    isConfigProfilesLoading ||
+                    isHostTagsLoading ||
+                    isNodesLoading ? (
                         <LoadingScreen height="60vh" />
                     ) : (
                         <motion.div

src/pages/dashboard/hosts/ui/components/hosts.page.component.tsx

@@ -11,4 +11,5 @@ export interface IProps {
     isConfigProfilesLoading: boolean
     isHostsLoading: boolean
     isHostTagsLoading: boolean
+    isNodesLoading: boolean
 }