feat: add clone functionality to BaseHostForm and update localization

- Introduced a clone button in BaseHostForm to allow users to duplicate host configurations.
- Updated localization files for English, Persian, and Russian to include new translation for "Clone".
- Enhanced EditHostModalWidget to handle cloning of hosts with appropriate parameters.
- Modified IProps interface to include optional handleCloneHost function.

Author: kastov

public/locales/en/remnawave.json

@@ -310,7 +310,8 @@
         "extra-xhttp-description": "This extra params will work only with xHTTP protocol. Pass object \"extra\" to the client. This JSON input is not validated, be sure to paste the correct extra params. Use the button below to copy the basic extra params, then paste it into the JSON input.",
         "invalid-json": "Invalid JSON",
         "fill-with-sample-xhttp-extra-params": "Fill with sample xHTTP extra params",
-        "close": "Close"
+        "close": "Close",
+        "clone": "Clone"
     },
     "base-node-form": {
         "country": "Country",
@@ -808,4 +809,4 @@
             "updated-at": "Updated At"
         }
     }
-}
+}

public/locales/fa/remnawave.json

@@ -310,7 +310,8 @@
         "extra-xhttp-description": "This extra params will work only with xHTTP protocol. Pass object \"extra\" to the client. This JSON input is not validated, be sure to paste the correct extra params. Use the button below to copy the basic extra params, then paste it into the JSON input.",
         "invalid-json": "Invalid JSON",
         "fill-with-sample-xhttp-extra-params": "Fill with sample xHTTP extra params",
-        "close": "Close"
+        "close": "Close",
+        "clone": "Clone"
     },
     "base-node-form": {
         "country": "کشور",
@@ -808,4 +809,4 @@
             "updated-at": "Updated At"
         }
     }
-}
+}

public/locales/ru/remnawave.json

@@ -310,7 +310,8 @@
         "extra-xhttp-description": "This extra params will work only with xHTTP protocol. Pass object \"extra\" to the client. This JSON input is not validated, be sure to paste the correct extra params. Use the button below to copy the basic extra params, then paste it into the JSON input.",
         "invalid-json": "Invalid JSON",
         "fill-with-sample-xhttp-extra-params": "Fill with sample xHTTP extra params",
-        "close": "Close"
+        "close": "Close",
+        "clone": "Clone"
     },
     "base-node-form": {
         "country": "Страна",
@@ -808,4 +809,4 @@
             "updated-at": "Updated At"
         }
     }
-}
+}

src/shared/ui/forms/hosts/base-host-form/base-host-form.tsx

@@ -17,6 +17,7 @@ import {
     PiArrowUpDuotone,
     PiCaretDown,
     PiCaretUp,
+    PiCopyDuotone,
     PiFloppyDiskDuotone,
     PiInfo,
     PiPencilDuotone
@@ -85,8 +86,16 @@ const pasteBasicXHttpExtraParams = `{
 export const BaseHostForm = <T extends CreateHostCommand.Request | UpdateHostCommand.Request>(
     props: IProps<T>
 ) => {
-    const { form, advancedOpened, handleSubmit, host, inbounds, setAdvancedOpened, isSubmitting } =
-        props
+    const {
+        form,
+        advancedOpened,
+        handleSubmit,
+        host,
+        inbounds,
+        setAdvancedOpened,
+        isSubmitting,
+        handleCloneHost
+    } = props
 
     const { t } = useTranslation()
     const [opened, { open, close }] = useDisclosure(false)
@@ -317,17 +326,32 @@ export const BaseHostForm = <T extends CreateHostCommand.Request | UpdateHostCom
                     <DeleteHostFeature />
                 </ActionIcon.Group>
 
-                <Button
-                    color="blue"
-                    disabled={!form.isValid() || !form.isDirty() || !form.isTouched()}
-                    leftSection={<PiFloppyDiskDuotone size="1rem" />}
-                    loading={isSubmitting}
-                    size="md"
-                    type="submit"
-                    variant="outline"
-                >
-                    {t('base-host-form.save')}
-                </Button>
+                <Group gap="xs">
+                    {handleCloneHost && (
+                        <Button
+                            color="blue"
+                            leftSection={<PiCopyDuotone size="1rem" />}
+                            loading={isSubmitting}
+                            onClick={handleCloneHost}
+                            size="md"
+                            variant="light"
+                        >
+                            {t('base-host-form.clone')}
+                        </Button>
+                    )}
+
+                    <Button
+                        color="blue"
+                        disabled={!form.isValid() || !form.isDirty() || !form.isTouched()}
+                        leftSection={<PiFloppyDiskDuotone size="1rem" />}
+                        loading={isSubmitting}
+                        size="md"
+                        type="submit"
+                        variant="outline"
+                    >
+                        {t('base-host-form.save')}
+                    </Button>
+                </Group>
             </Group>
 
             <Drawer

src/shared/ui/forms/hosts/base-host-form/interfaces/iprops.interface.ts

@@ -8,6 +8,7 @@ import { UseFormReturnType } from '@mantine/form'
 export interface IProps<T extends CreateHostCommand.Request | UpdateHostCommand.Request> {
     advancedOpened: boolean
     form: UseFormReturnType<T>
+    handleCloneHost?: () => void
     handleSubmit: () => void
     host?: UpdateHostCommand.Response['response']
     inbounds: GetInboundsCommand.Response['response']

src/widgets/dashboard/hosts/edit-host-modal/edit-host-modal.widget.tsx

@@ -9,8 +9,8 @@ import {
     useHostsStoreEditModalHost,
     useHostsStoreEditModalIsOpen
 } from '@entities/dashboard'
+import { useCreateHost, useGetInbounds, useUpdateHost } from '@shared/api/hooks'
 import { BaseHostForm } from '@shared/ui/forms/hosts/base-host-form'
-import { useGetInbounds, useUpdateHost } from '@shared/api/hooks'
 
 export const EditHostModalWidget = () => {
     const { t } = useTranslation()
@@ -50,6 +50,14 @@ export const EditHostModalWidget = () => {
         }
     })
 
+    const { mutate: createHost } = useCreateHost({
+        mutationFns: {
+            onSuccess: async () => {
+                handleClose()
+            }
+        }
+    })
+
     useEffect(() => {
         if (host && inbounds) {
             let xHttpExtraParamsParsed: null | object | string
@@ -113,6 +121,29 @@ export const EditHostModalWidget = () => {
         })
     })
 
+    const handleCloneHost = () => {
+        if (!host) {
+            return
+        }
+
+        createHost({
+            variables: {
+                ...host,
+                remark: `Clone #${Math.random().toString(36).substring(2, 15)}`,
+                port: host.port,
+                inboundUuid: host.inboundUuid,
+                isDisabled: true,
+                path: host.path ?? undefined,
+                sni: host.sni ?? undefined,
+                host: host.host ?? undefined,
+                alpn: (host.alpn as UpdateHostCommand.Request['alpn']) ?? undefined,
+                xHttpExtraParams: host.xHttpExtraParams ?? undefined,
+                fingerprint:
+                    (host.fingerprint as UpdateHostCommand.Request['fingerprint']) ?? undefined
+            }
+        })
+    }
+
     return (
         <Modal
             centered
@@ -123,6 +154,7 @@ export const EditHostModalWidget = () => {
             <BaseHostForm
                 advancedOpened={advancedOpened}
                 form={form}
+                handleCloneHost={handleCloneHost}
                 handleSubmit={handleSubmit}
                 host={host!}
                 inbounds={inbounds ?? []}

src/widgets/dashboard/hosts/hosts-table/hosts-table.widget.tsx

@@ -1,65 +1,61 @@
 import { DragDropContext, Droppable, DropResult } from '@hello-pangea/dnd'
-import { memo, useCallback, useEffect, useMemo } from 'react'
 import { useListState } from '@mantine/hooks'
+import { useEffect } from 'react'
 
 import { HostCardWidget } from '@widgets/dashboard/hosts/host-card'
 import { EmptyPageLayout } from '@shared/ui/layouts/empty-page'
 import { useReorderHosts } from '@shared/api/hooks'
 
 import { IProps } from './interfaces'
 
-const MemoizedHostCard = memo(HostCardWidget)
-
 export function HostsTableWidget(props: IProps) {
     const { inbounds, hosts, selectedHosts, setSelectedHosts } = props
+
     const [state, handlers] = useListState(hosts || [])
 
     const { mutate: reorderHosts } = useReorderHosts()
 
-    const checkOrderAndReorder = useCallback(() => {
-        if (!hosts || !state) return
-
-        const hasOrderChanged = hosts.some((host, index) => state[index]?.uuid !== host.uuid)
+    useEffect(() => {
+        ;(async () => {
+            if (!hosts || !state) {
+                return
+            }
 
-        if (hasOrderChanged) {
             const updatedHosts = hosts.map((host) => ({
                 uuid: host.uuid,
                 viewPosition: state.findIndex((stateItem) => stateItem.uuid === host.uuid)
             }))
 
-            reorderHosts({ variables: { hosts: updatedHosts } })
-        }
-    }, [hosts, state, reorderHosts])
+            const hasOrderChanged = hosts?.some((host, index) => host.uuid !== state[index].uuid)
 
-    useEffect(() => {
-        checkOrderAndReorder()
-    }, [checkOrderAndReorder])
+            if (hasOrderChanged) {
+                reorderHosts({ variables: { hosts: updatedHosts } })
+            }
+        })()
+    }, [state])
 
     useEffect(() => {
         handlers.setState(hosts || [])
     }, [hosts])
 
-    const toggleHostSelection = useCallback(
-        (hostId: string) => {
-            setSelectedHosts((prev) =>
-                prev.includes(hostId) ? prev.filter((id) => id !== hostId) : [...prev, hostId]
-            )
-        },
-        [setSelectedHosts]
-    )
+    if (!hosts || !inbounds) {
+        return null
+    }
 
-    const handleDragEnd = useCallback(
-        async (result: DropResult) => {
-            const { destination, source } = result
-            handlers.reorder({ from: source.index, to: destination?.index || 0 })
-        },
-        [handlers]
-    )
+    if (hosts.length === 0) {
+        return <EmptyPageLayout />
+    }
+
+    const handleDragEnd = async (result: DropResult) => {
+        const { destination, source } = result
+        handlers.reorder({ from: source.index, to: destination?.index || 0 })
+    }
 
-    const selectedHostsMap = useMemo(() => {
-        const map = new Set(selectedHosts)
-        return map
-    }, [selectedHosts])
+    const toggleHostSelection = (hostId: string) => {
+        setSelectedHosts((prev) =>
+            prev.includes(hostId) ? prev.filter((id) => id !== hostId) : [...prev, hostId]
+        )
+    }
 
     if (!hosts || !inbounds) return null
     if (hosts.length === 0) return <EmptyPageLayout />
@@ -71,10 +67,10 @@ export function HostsTableWidget(props: IProps) {
                     <div {...provided.droppableProps} ref={provided.innerRef}>
                         {state.map((item, index) => (
                             <div key={item.uuid} style={{ position: 'relative' }}>
-                                <MemoizedHostCard
+                                <HostCardWidget
                                     inbounds={inbounds}
                                     index={index}
-                                    isSelected={selectedHostsMap.has(item.uuid)}
+                                    isSelected={selectedHosts.includes(item.uuid)}
                                     item={item}
                                     onSelect={() => toggleHostSelection(item.uuid)}
                                 />