feat: поддержка множественных тегов для хостов

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

@@ -461,9 +461,15 @@ export const BaseHostForm = <T extends CreateHostCommand.Request | UpdateHostCom
                                         </Group>
 
                                         <HostTagsInputWidget
-                                            key={form.key('tag')}
-                                            {...form.getInputProps('tag')}
-                                            value={form.getValues().tag}
+                                            key={form.key('tags')}
+                                            {...form.getInputProps('tags')}
+                                            error={
+                                                Object.keys(form.errors)
+                                                    .filter((key) => key.startsWith('tags.'))
+                                                    .map((key) => form.errors[key])
+                                                    .join(', ') ||
+                                                form.getInputProps('tags').error
+                                            }
                                         />
 
                                         <MultiSelect

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

@@ -134,7 +134,7 @@ export const EditHostModalWidget = memo(() => {
                 muxParams: muxParamsParsed,
                 sockoptParams: sockoptParamsParsed,
                 finalMask: finalMaskParsed,
-                tag: host.tag ?? undefined,
+                tags: host.tags ?? [],
                 isHidden: host.isHidden,
                 overrideSniFromAddress: host.overrideSniFromAddress,
                 keepSniBlank: host.keepSniBlank,
@@ -259,7 +259,7 @@ export const EditHostModalWidget = memo(() => {
                 muxParams,
                 sockoptParams,
                 finalMask,
-                tag: values.tag === '' ? null : values.tag
+                tags: values.tags ?? []
             }
         })
     })
@@ -300,7 +300,7 @@ export const EditHostModalWidget = memo(() => {
                 },
                 serverDescription: host.serverDescription ?? undefined,
                 sockoptParams: host.sockoptParams ?? undefined,
-                tag: host.tag ?? undefined,
+                tags: host.tags ?? [],
                 overrideSniFromAddress: host.overrideSniFromAddress,
                 keepSniBlank: host.keepSniBlank,
                 vlessRouteId: host.vlessRouteId ?? undefined,

src/widgets/dashboard/hosts/host-card/host-card.widget.tsx

@@ -37,6 +37,7 @@ export function HostCardWidget(props: IProps) {
     const openModalWithData = useModalsStoreOpenWithData()
 
     const [isHovered, setIsHovered] = useState(false)
+    const [tagsExpanded, setTagsExpanded] = useState(false)
     const isMobile = useMediaQuery('(max-width: 48em)')
 
     const configProfile = configProfiles?.find(
@@ -46,7 +47,7 @@ export function HostCardWidget(props: IProps) {
     const isFiltered =
         (!!filters.configProfileUuid && configProfile?.uuid !== filters.configProfileUuid) ||
         (!!filters.inboundUuid && item.inbound.configProfileInboundUuid !== filters.inboundUuid) ||
-        (!!filters.hostTag && item.tag !== filters.hostTag)
+        (!!filters.hostTag && !item.tags?.includes(filters.hostTag))
 
     const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
         id: item.uuid,
@@ -123,16 +124,33 @@ export function HostCardWidget(props: IProps) {
                             </Box>
                         </Group>
 
-                        <Group gap="xs">
-                            {item.tag && (
+                        <Group gap="xs" wrap="wrap">
+                            {(tagsExpanded ? item.tags : item.tags?.slice(0, 2))?.map(
+                                (tag) => (
+                                    <Badge
+                                        autoContrast
+                                        color={ch.hex(tag)}
+                                        key={tag}
+                                        leftSection={<TbTagStarred size={12} />}
+                                        size="md"
+                                        variant="outline"
+                                    >
+                                        {tag}
+                                    </Badge>
+                                )
+                            )}
+                            {(item.tags?.length ?? 0) > 2 && (
                                 <Badge
-                                    autoContrast
-                                    color={ch.hex(item.tag)}
-                                    leftSection={<TbTagStarred size={12} />}
+                                    color="gray"
+                                    onClick={(e) => {
+                                        e.stopPropagation()
+                                        setTagsExpanded((v) => !v)
+                                    }}
                                     size="md"
-                                    variant="outline"
+                                    style={{ cursor: 'pointer' }}
+                                    variant="default"
                                 >
-                                    {item.tag}
+                                    {tagsExpanded ? '−' : `+${item.tags!.length - 2}`}
                                 </Badge>
                             )}
                         </Group>
@@ -348,15 +366,31 @@ export function HostCardWidget(props: IProps) {
                                 </Badge>
                             )}
 
-                            {item.tag && (
+                            {!tagsExpanded &&
+                                item.tags?.slice(0, 2).map((tag) => (
+                                    <Badge
+                                        autoContrast
+                                        color={ch.hex(tag)}
+                                        key={tag}
+                                        leftSection={<TbTagStarred size={12} />}
+                                        size="md"
+                                        variant="outline"
+                                    >
+                                        {tag}
+                                    </Badge>
+                                ))}
+                            {(item.tags?.length ?? 0) > 2 && (
                                 <Badge
-                                    autoContrast
-                                    color={ch.hex(item.tag)}
-                                    leftSection={<TbTagStarred size={12} />}
+                                    color="gray"
+                                    onClick={(e) => {
+                                        e.stopPropagation()
+                                        setTagsExpanded((v) => !v)
+                                    }}
                                     size="md"
-                                    variant="outline"
+                                    style={{ cursor: 'pointer' }}
+                                    variant="default"
                                 >
-                                    {item.tag}
+                                    {tagsExpanded ? '−' : `+${item.tags!.length - 2}`}
                                 </Badge>
                             )}
 
@@ -392,6 +426,23 @@ export function HostCardWidget(props: IProps) {
                             </Badge>
                         </Group>
                     </Group>
+
+                    {tagsExpanded && (item.tags?.length ?? 0) > 0 && (
+                        <Group gap="xs" mt="xs" wrap="wrap">
+                            {item.tags!.map((tag) => (
+                                <Badge
+                                    autoContrast
+                                    color={ch.hex(tag)}
+                                    key={tag}
+                                    leftSection={<TbTagStarred size={12} />}
+                                    size="md"
+                                    variant="outline"
+                                >
+                                    {tag}
+                                </Badge>
+                            ))}
+                        </Group>
+                    )}
                 </Box>
             </Group>
         </Box>

src/widgets/dashboard/hosts/host-tags-input/host-tags-input.tsx

@@ -1,155 +1,31 @@
-/* eslint-disable no-nested-ternary */
-import { CloseButton, Combobox, InputBase, Loader, useCombobox } from '@mantine/core'
+import { TagsInput, TagsInputProps } from '@mantine/core'
 import { useTranslation } from 'react-i18next'
 import { PiTagDuotone } from 'react-icons/pi'
-import { useEffect, useState } from 'react'
 
 import { useGetHostTags } from '@shared/api/hooks'
 
-import type { IProps } from './interfaces/props.interface'
-
-export function HostTagsInputWidget(props: IProps) {
-    const { value, onChange, defaultValue, ...restProps } = props
-    const [data, setData] = useState<string[]>([])
-    const [search, setSearch] = useState(value?.toString() || '')
-    const [error, setError] = useState('')
-
+export function HostTagsInputWidget(props: TagsInputProps) {
     const { t } = useTranslation()
 
-    const {
-        data: hostTags,
-        isRefetching: isHostTagsRefetching,
-        isLoading: isHostTagsLoading
-    } = useGetHostTags({
+    const { data: hostTags } = useGetHostTags({
         rQueryParams: {
             enabled: false
         }
     })
 
-    const combobox = useCombobox({
-        onDropdownOpen: async () => {
-            if (!isHostTagsLoading && !isHostTagsRefetching) {
-                setData(hostTags?.tags || [])
-            }
-        }
-    })
-
-    const validateTag = (tag: string) => {
-        if (!/^[A-Z0-9_:]+$/.test(tag)) {
-            return t(
-                'host-tags-input.tag-can-only-contain-uppercase-letters-numbers-underscores-and-colons'
-            )
-        }
-        if (tag.length > 32) {
-            return t('host-tags-input.tag-must-be-less-than-32-characters')
-        }
-        return null
-    }
-
-    useEffect(() => {
-        if (hostTags && !isHostTagsLoading && !isHostTagsRefetching) {
-            setData(hostTags.tags)
-        }
-    }, [hostTags, isHostTagsLoading, isHostTagsRefetching])
-
-    const exactOptionMatch = data.some((item) => item === search)
-    const filteredOptions = exactOptionMatch
-        ? data
-        : data.filter((item) => item.toLowerCase().includes(search.toLowerCase().trim()))
-
-    const options = filteredOptions.map((item) => (
-        <Combobox.Option key={item} value={item}>
-            {item}
-        </Combobox.Option>
-    ))
-
     return (
-        <Combobox
-            onExitTransitionEnd={() => {
-                combobox.resetSelectedOption()
-            }}
-            onOptionSubmit={(val) => {
-                if (val === '$create') {
-                    const validationError = validateTag(search)
-                    if (validationError) {
-                        setError(validationError)
-                        return
-                    }
-                    setData((current) => [...current, search])
-                    onChange?.(search)
-                    setError('')
-
-                    return
-                }
-
-                onChange?.(val)
-                setSearch(val)
-                setError('')
-
-                combobox.closeDropdown()
-            }}
-            position="top"
-            store={combobox}
-            withinPortal={false}
-        >
-            <Combobox.Target>
-                <InputBase
-                    {...restProps}
-                    description={t(
-                        'host-tags-input.tags-are-not-visible-to-end-users-tag-will-be-sent-with-raw-subscription-only'
-                    )}
-                    error={error || restProps.error}
-                    label="Tag"
-                    leftSection={<PiTagDuotone size="16px" />}
-                    onBlur={() => {
-                        combobox.closeDropdown()
-                        onChange?.(search.trim() === '' ? null : search)
-                    }}
-                    onChange={(event) => {
-                        combobox.openDropdown()
-                        combobox.updateSelectedOptionIndex()
-                        setSearch(event.currentTarget.value)
-                    }}
-                    onClick={() => combobox.openDropdown()}
-                    onFocus={() => combobox.openDropdown()}
-                    placeholder="ROUTING_HOST"
-                    rightSection={
-                        isHostTagsRefetching ? (
-                            <Loader size="xs" />
-                        ) : (value !== null && value !== undefined) || search ? (
-                            <CloseButton
-                                aria-label={t('host-tags-input.clear-value')}
-                                onClick={() => {
-                                    onChange?.(null)
-                                    setError('')
-                                    setSearch('')
-                                }}
-                                onMouseDown={(event) => event.preventDefault()}
-                                size="sm"
-                            />
-                        ) : (
-                            <Combobox.Chevron />
-                        )
-                    }
-                    rightSectionPointerEvents={
-                        (value === null || value === undefined) && !search ? 'none' : 'all'
-                    }
-                    value={search}
-                />
-            </Combobox.Target>
-
-            <Combobox.Dropdown>
-                <Combobox.Options mah={200} style={{ overflowY: 'auto' }}>
-                    {isHostTagsLoading || isHostTagsRefetching ? (
-                        <Combobox.Empty>Loading....</Combobox.Empty>
-                    ) : (
-                        options
-                    )}
-                    {!exactOptionMatch && search.trim().length > 0 && (
-                        <Combobox.Option value="$create">+ {search}</Combobox.Option>
-                    )}
-                </Combobox.Options>
-            </Combobox.Dropdown>
-        </Combobox>
+        <TagsInput
+            clearable
+            data={hostTags?.tags || []}
+            description={t(
+                'host-tags-input.tags-are-not-visible-to-end-users-tag-will-be-sent-with-raw-subscription-only'
+            )}
+            label="Tags"
+            leftSection={<PiTagDuotone size="16px" />}
+            maxTags={10}
+            placeholder="Enter tags (comma, space, semicolon)"
+            splitChars={[',', ' ', ';']}
+            {...props}
+        />
     )
 }

src/widgets/dashboard/hosts/host-tags-input/interfaces/props.interface.tsx

@@ -1,7 +1,3 @@
-import type { InputBaseProps } from '@mantine/core'
+import type { TagsInputProps } from '@mantine/core'
 
-export interface IProps extends InputBaseProps {
-    defaultValue?: null | string
-    onChange?: (value: null | string) => void
-    value?: null | string
-}
+export interface IProps extends TagsInputProps {}

src/widgets/dashboard/templates/subscription-template-editor/utils/setup-template-monaco.tsx

@@ -26,7 +26,7 @@ function buildMarkdownDescription(host: Host): string {
         `| **Status** | ${icon} ${label} |`
     ]
 
-    if (host.tag) rows.push(`| **Tag** | \`${host.tag}\` |`)
+    if (host.tags?.length) rows.push(`| **Tags** | \`${host.tags.join(', ')}\` |`)
     if (host.sni) rows.push(`| **SNI** | \`${host.sni}\` |`)
     if (host.serverDescription) rows.push(`| **Description** | ${host.serverDescription} |`)
     if (host.inbound.configProfileUuid) {