From e18d3b4ce6c4edaf6c48c234387196543e77620c Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Sat, 18 Jul 2026 17:31:22 +0700
Subject: [PATCH] =?UTF-8?q?feat(topology):=20=D1=84=D0=BB=D0=B0=D0=B3=20?=
 =?UTF-8?q?=D1=81=D1=82=D1=80=D0=B0=D0=BD=D1=8B=20=D0=BD=D0=B0=20VPS-?=
 =?UTF-8?q?=D1=83=D0=B7=D0=BB=D0=B5=20=D1=81=D1=85=D0=B5=D0=BC=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

В левом верхнем углу карточки сервера показывается флаг по стране расположения, как у Timeweb.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/topology/nodes/vps-node.tsx  | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/topology/nodes/vps-node.tsx b/apps/web/src/components/topology/nodes/vps-node.tsx
index bc6b5a1..d17a9b5 100644
--- a/apps/web/src/components/topology/nodes/vps-node.tsx
+++ b/apps/web/src/components/topology/nodes/vps-node.tsx
@@ -3,9 +3,10 @@ import { Handle, Position, type NodeProps } from '@xyflow/react'
 import { ServerIcon } from 'lucide-react'
 import { useQuery } from '@tanstack/react-query'
 import { cn } from '@cfdm/ui/lib/utils'
+import { CountryFlag } from '@/components/country-flag'
 import { StatusBadge } from '@/components/status-badge'
 import { snapshotQueryOptions } from '@/queries/snapshot'
-import { vpsStatusLabel } from '@/lib/format'
+import { resolveCountryCode, vpsStatusLabel } from '@/lib/format'
 import type { Vps } from '@/types/entities'
 import { type VpsNodeData, vpsSpecsLine } from '../types'
 
@@ -28,15 +29,27 @@ function VpsNodeComponent({ data, selected }: NodeProps & { data: VpsNodeData })
   const orphan = !vps
   const name = vps?.dns || vps?.ip || data.label || 'VPS'
   const rate = vps ? formatRate(vps) : null
+  const countryCode = resolveCountryCode(vps?.country)
+  const hasFlag = Boolean(countryCode)
 
   return (
     <div
       className={cn(
-        'min-w-[220px] rounded-lg border bg-background px-3 py-2 shadow-sm',
+        'relative min-w-[220px] rounded-lg border bg-background px-3 py-2 shadow-sm',
+        hasFlag && 'pt-3',
         selected ? 'border-primary ring-2 ring-primary/20' : 'border-border',
         orphan && 'border-warning/60',
       )}
     >
+      {hasFlag ? (
+        <div className="absolute -top-1.5 left-2 z-10" title={vps?.country || undefined}>
+          <CountryFlag
+            code={countryCode}
+            country={vps?.country}
+            className="size-5 rounded-[3px] shadow-sm ring-1 ring-border"
+          />
+        </div>
+      ) : null}
       <Handle
         type="target"
         position={Position.Left}