Refine device panel layout and IP copy feedback

test/web/device-inventory-contract.test.js

@@ -29,11 +29,14 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(server, /requestUrl\.pathname === '\/api\/devices\/refresh'[\s\S]*deviceInventory\.refresh\(\)/);
   assert.match(server, /\/api\\\/devices\\\/\(dev_\[a-f0-9\]\{16\}\)\\\/policy\$[\s\S]*deviceInventory\.setPolicy/);
   assert.match(panel, /<Tooltip>Изменить название<\/Tooltip>/);
+  assert.match(panel, /copyText\(device\.ip\)/);
+  assert.match(panel, /client-device-name-primary[\s\S]*client-device-name-ip[\s\S]*client-device-name-feedback/);
+  assert.match(panel, /client-device-name-feedback[\s\S]*'Скопировано'/);
   assert.match(panel, /online \? 'В сети' : <TextMorph from=\{seen\.label\} to=\{seen\.relative\} \/>/);
   assert.match(panel, /aria-label=\{`\$\{online \? 'В сети' : 'Не в сети'\}\. Последний контакт: \$\{seen\.tooltip\}`\}/);
   assert.doesNotMatch(panel, /client-device-status|STATUS_LABELS/);
   assert.doesNotMatch(panel, /client-text-morph-goo/);
-  assert.match(panel, /client-device-addresses/);
+  assert.doesNotMatch(panel, /client-device-addresses|client-device-manufacturer|client-device-meta/);
   assert.doesNotMatch(panel, /device\.interface/);
   assert.doesNotMatch(panel, /device\.mac/);
   assert.doesNotMatch(panel, /client-device-identity|Пояснение идентификации устройства|ⓘ/);
@@ -43,17 +46,15 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(panel, /Учитывается только трафик, который прошёл через Harbor/);
   assert.match(panel, /Gateway: получено \$\{download\}, отдано \$\{upload\}/);
   assert.match(panel, /Прокси: получено \$\{proxyDownload\}, отдано \$\{proxyUpload\}/);
-  assert.match(panel, /Gateway \{gatewayTraffic\}/);
-  assert.match(panel, /Прокси \{proxyTraffic\}/);
-  assert.match(panel, /\(gatewayTotal > 0n \|\| proxyTotal > 0n\)/);
-  assert.match(panel, /gatewayTotal > 0n && <span>Gateway/);
-  assert.match(panel, /proxyTotal > 0n && <span className="is-proxy">Прокси/);
+  assert.match(panel, /<b>Gateway<\/b><strong>\{gatewayTraffic\}<\/strong>/);
+  assert.match(panel, /className="is-proxy"><b>Прокси<\/b><strong>\{proxyTraffic\}<\/strong>/);
   assert.match(panel, /source\?\.traffic\?\.proxy\?\.error/);
-  assert.match(panel, /client-device-pin-wrap[\s\S]*client-device-heading/);
+  assert.match(panel, /client-device-pin-wrap[\s\S]*client-device-main[\s\S]*client-device-traffic[\s\S]*client-device-policy-wrap/);
   assert.doesNotMatch(panel, /client-device-details/);
   assert.match(panel, /api\.devices\.setPolicy\(device\.id, mode, snapshot\.revision\)/);
   assert.match(panel, /requestError\.code !== 'STATE_CONFLICT'[\s\S]*latestDevice\.desiredPolicy !== device\.desiredPolicy[\s\S]*api\.devices\.setPolicy\(device\.id, mode, latest\.revision\)/);
   assert.match(panel, /className=\{`client-device-policy is-\$\{displayPolicy\}/);
+  assert.match(panel, /displayPolicy === 'direct' \? <svg[\s\S]*M4 12h15M14 7l5 5-5 5[\s\S]*M12 3 19 6v5/);
   assert.match(panel, /Полностью обходит sing-box/);
   assert.match(panel, /client-drawer client-instructions client-devices/);
   assert.doesNotMatch(panel, /точная MAC|частная MAC|<dt>Источник<\/dt>/);
@@ -61,10 +62,13 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.doesNotMatch(panel, /Закрепите устройство, чтобы изменить маршрут|Сначала верните маршрут через Gateway/);
   assert.match(panel, /maxLength="64"[\s\S]*autoFocus/);
   assert.match(styles, /\.client-devices \{\s*width: min\(560px, 100vw\)/);
-  assert.match(styles, /\.client-device \{[\s\S]*grid-template-columns: 32px minmax\(0, 1fr\);[\s\S]*padding: 10px 8px/);
-  assert.match(styles, /\.client-device-heading \{[\s\S]*grid-column: 2;[\s\S]*grid-template-columns: minmax\(0, 1fr\) auto/);
-  assert.match(styles, /\.client-device-meta \{[\s\S]*grid-template-columns: minmax\(0, 1fr\) 72px auto/);
-  assert.doesNotMatch(styles, /\.client-device-meta \{[^}]*margin-left/);
+  assert.match(styles, /\.client-device \{[\s\S]*grid-template-columns: 32px minmax\(0, 1fr\) 104px 32px;[\s\S]*padding: 8px/);
+  assert.match(styles, /\.client-device-main \{[\s\S]*display: flex;[\s\S]*align-items: center/);
+  assert.match(styles, /\.client-device-traffic-sources \{[\s\S]*display: grid/);
+  assert.match(styles, /\.client-device-traffic-sources span \{[\s\S]*grid-template-columns: 41px minmax\(0, 1fr\)/);
+  assert.match(styles, /\.client-device-policy \{[\s\S]*width: 32px;[\s\S]*border-radius: 50%/);
+  assert.match(styles, /\.client-device-name:hover \.client-device-name-ip[\s\S]*opacity: 1/);
+  assert.match(styles, /\.client-device-name\.is-copied \.client-device-name-feedback[\s\S]*opacity: 1/);
   assert.match(styles, /\.client-device-last-seen\.is-online \{[\s\S]*color: var\(--client-accent\)/);
   assert.match(styles, /\.client-text-morph-value \{[\s\S]*transition: opacity 360ms[\s\S]*filter 480ms/);
   assert.match(styles, /\.client-device-last-seen:hover \.client-text-morph-value\.is-relative[\s\S]*opacity: 1/);
@@ -74,7 +78,7 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(styles, /\.client-device-edit:hover svg[\s\S]*translate\(1px, -1px\) rotate\(-4deg\)/);
   assert.match(styles, /\.client-devices-sort:hover \.client-devices-sort-icon[\s\S]*rotate\(360deg\)/);
   assert.match(styles, /\.client-devices-refresh-ring circle[\s\S]*client-devices-refresh-progress 15s/);
-  assert.match(styles, /@media \(prefers-reduced-motion: reduce\)[\s\S]*\.client-device-policy[\s\S]*\.client-text-morph-value/);
+  assert.match(styles, /@media \(prefers-reduced-motion: reduce\)[\s\S]*\.client-device-policy svg[\s\S]*\.client-device-name > span[\s\S]*\.client-text-morph-value/);
   assert.match(styles, /\.client-drawer \{[\s\S]*z-index: 50;[\s\S]*box-shadow:/);
   assert.match(styles, /\.harbor-versions \{[\s\S]*z-index: 40/);
 });