From 8139543e9a42813f005f6f7f0d3433554cfb19d7 Mon Sep 17 00:00:00 2001
From: Dmitriy Petrov <floplopru@gmail.com>
Date: Tue, 14 Jul 2026 22:53:06 +0300
Subject: [PATCH] Refine server picker ping labels and layout

---
 src/shared/versions.js                      |  4 ++--
 src/web/components/ServerPicker.jsx         | 18 ++++++++++--------
 src/web/styles.css                          | 14 +++++++-------
 test/web/responsive-layout-contract.test.js |  2 +-
 test/web/server-picker.test.js              |  7 ++++++-
 5 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/shared/versions.js b/src/shared/versions.js
index 807808e..fcc137d 100644
--- a/src/shared/versions.js
+++ b/src/shared/versions.js
@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.8.4',
-  gatewayClient: '0.8.4',
+  macClient: '0.8.5',
+  gatewayClient: '0.8.5',
   gatewayBackend: '0.8.0',
 });
 
diff --git a/src/web/components/ServerPicker.jsx b/src/web/components/ServerPicker.jsx
index b96123f..df1e5b2 100644
--- a/src/web/components/ServerPicker.jsx
+++ b/src/web/components/ServerPicker.jsx
@@ -39,19 +39,21 @@ function readAuto() {
 
 function serverHealthText(ping) {
   if (ping?.error) return 'Проверка недоступна';
-  if (ping?.ok) return `TCP ${ping.latency} мс`;
-  return ping ? 'TCP недоступен' : 'Не проверен';
+  if (ping?.ok) return `${ping.latency} мс`;
+  return ping ? 'Недоступен' : null;
 }
 
 function ServerHealth({ ping, fallback }) {
   const health = fallback || serverHealthText(ping);
+  if (!health && !ping?.checking) return null;
+
   return <small
     className={`client-server-health${ping?.checking ? ' is-checking' : ''}`}
     title={ping?.checkedAt || undefined}
-    aria-label={ping?.checking ? 'Проверяем TCP' : health}
+    aria-label={ping?.checking ? 'Проверяем пинг' : health}
   >
     <span aria-hidden="true">{health}</span>
-    <span className="client-server-health-checking" aria-hidden="true">Проверяем TCP…</span>
+    <span className="client-server-health-checking" aria-hidden="true">Проверяем…</span>
   </small>;
 }
 
@@ -59,11 +61,11 @@ function ServerCheckButton({ checking, disabled, onClick }) {
   return <button
     className={`client-server-check${checking ? ' is-checking' : ''}`}
     type="button"
-    aria-label={checking ? 'Проверяем доступность серверов по TCP' : 'Проверить доступность серверов по TCP'}
+    aria-label={checking ? 'Проверяем пинг серверов' : 'Проверить пинг серверов'}
     disabled={checking || disabled}
     onClick={onClick}
   >
-    <span>TCP</span>
+    <span>Проверить пинг</span>
     <svg viewBox="0 0 24 24" aria-hidden="true">
       <path d="M21 12a9 9 0 0 0-15.2-6.5L3 8m0-5v5h5M3 12a9 9 0 0 0 15.2 6.5L21 16m0 5v-5h-5" />
     </svg>
@@ -71,7 +73,7 @@ function ServerCheckButton({ checking, disabled, onClick }) {
 }
 
 function ServerRow({ server, selected, favorite, ping, disabled, index, onSelect, onFavorite }) {
-  const health = ping?.checking ? 'Проверяем TCP' : serverHealthText(ping);
+  const health = ping?.checking ? 'Проверяем пинг' : serverHealthText(ping);
 
   return <div className={`client-server-row${selected ? ' is-selected' : ''}${onFavorite ? ' has-favorite' : ''}`}>
     <button
@@ -79,7 +81,7 @@ function ServerRow({ server, selected, favorite, ping, disabled, index, onSelect
       type="button"
       disabled={disabled}
       aria-pressed={selected}
-      aria-label={`${server.label}, ${server.host}:${server.port}, ${health}`}
+      aria-label={`${server.label}, ${server.host}:${server.port}${health ? `, ${health}` : ''}`}
       style={{ '--server-index': Math.min(index, 7) }}
       onClick={() => onSelect(server.id)}
     >
diff --git a/src/web/styles.css b/src/web/styles.css
index 5de27c4..f34f126 100644
--- a/src/web/styles.css
+++ b/src/web/styles.css
@@ -2598,18 +2598,18 @@ p {
   display: grid;
   grid-template-columns: 1fr;
   gap: 8px;
-  width: min(100%, 150px);
+  width: min(100%, 220px);
   margin-inline: auto;
 }
 
 .client-server {
   min-width: 0;
-  min-height: 50px;
+  min-height: 44px;
   display: flex;
-  flex-direction: column;
+  align-items: baseline;
   justify-content: center;
-  gap: 3px;
-  padding: 7px 4px 8px;
+  gap: 9px;
+  padding: 6px 4px 7px;
   border: 0;
   border-bottom: 1px solid var(--client-border);
   border-radius: 0;
@@ -2679,9 +2679,9 @@ p {
 }
 
 .client-server-health {
-  min-height: 14px;
   display: grid;
   place-items: center;
+  white-space: nowrap;
 }
 
 .client-server-health > span {
@@ -2749,7 +2749,7 @@ p {
 .client-server-check {
   grid-column: 3;
   justify-self: start;
-  width: 88px;
+  width: 116px;
   min-height: 32px;
   padding: 5px 7px;
   border: 0;
diff --git a/test/web/responsive-layout-contract.test.js b/test/web/responsive-layout-contract.test.js
index ef01b2a..d450eb0 100644
--- a/test/web/responsive-layout-contract.test.js
+++ b/test/web/responsive-layout-contract.test.js
@@ -41,7 +41,7 @@ test('server rows scroll without moving the subscription column or showing a scr
   assert.match(styles, /\.client-server-scroll::-webkit-scrollbar\s*\{[\s\S]*display:\s*none/);
   assert.match(simpleScroll, /max-height:\s*none/);
   assert.match(simpleScroll, /overflow:\s*visible/);
-  assert.match(grid, /width:\s*min\(100%, 150px\)/);
+  assert.match(grid, /width:\s*min\(100%, 220px\)/);
   assert.doesNotMatch(rule('.client-servers.is-scalable .client-server-grid'), /width:/);
 });
 
diff --git a/test/web/server-picker.test.js b/test/web/server-picker.test.js
index 5a994b9..30961f9 100644
--- a/test/web/server-picker.test.js
+++ b/test/web/server-picker.test.js
@@ -13,6 +13,7 @@ import {
 const root = path.resolve(import.meta.dirname, '../..');
 const picker = fs.readFileSync(path.join(root, 'src/web/components/ServerPicker.jsx'), 'utf8');
 const overview = fs.readFileSync(path.join(root, 'src/web/components/ClientOverviewPage.jsx'), 'utf8');
+const styles = fs.readFileSync(path.join(root, 'src/web/styles.css'), 'utf8');
 
 const fixtures = (count) => Array.from({ length: count }, (_, index) => ({
   id: `srv-${String(count - index).padStart(3, '0')}`,
@@ -52,10 +53,14 @@ test('server picker checks health only on manual refresh and bounds the result w
   assert.match(picker, /aria-expanded={!isCollapsed}/);
 });
 
-test('manual health remains visible for Auto and simple rows', () => {
+test('manual ping uses plain language and keeps results beside server names', () => {
   assert.match(picker, /function ServerHealth/);
   assert.match(picker, /client-server-health-checking/);
   assert.match(picker, /function ServerCheckButton/);
+  assert.match(picker, /<span>Проверить пинг<\/span>/);
+  assert.doesNotMatch(picker, /TCP|Не проверен/);
+  assert.match(styles, /\.client-server \{[\s\S]*?align-items: baseline;[\s\S]*?justify-content: center;/);
+  assert.match(styles, /\.client-server-grid \{[\s\S]*?width: min\(100%, 220px\);/);
   assert.match(picker, /server={servers\[0\]}[\s\S]*?ping={pings\[servers\[0\]\.id\]}/);
   assert.match(picker, /simpleServers\.map[\s\S]*?ping={pings\[server\.id\]}/);
 });