Polish server health checking feedback and bump Harbor versions

src/shared/versions.js

@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.7.22',
+  macClient: '0.7.23',
-  gatewayClient: '0.7.22',
+  gatewayClient: '0.7.23',
   gatewayBackend: '0.7.1',
 });
 

src/web/components/ServerPicker.jsx

@@ -38,14 +38,40 @@ function readAuto() {
 }
 
 function serverHealthText(ping) {
-  if (ping?.checking) return 'Проверяем TCP…';
   if (ping?.error) return 'Проверка недоступна';
   if (ping?.ok) return `TCP ${ping.latency} мс`;
   return ping ? 'TCP недоступен' : 'Не проверен';
 }
 
+function ServerHealth({ ping, fallback }) {
+  const health = fallback || serverHealthText(ping);
+  return <small
+    className={`client-server-health${ping?.checking ? ' is-checking' : ''}`}
+    title={ping?.checkedAt || undefined}
+    aria-label={ping?.checking ? 'Проверяем TCP' : health}
+  >
+    <span aria-hidden="true">{health}</span>
+    <span className="client-server-health-checking" aria-hidden="true">Проверяем TCP…</span>
+  </small>;
+}
+
+function ServerCheckButton({ checking, disabled, onClick }) {
+  return <button
+    className={`client-server-check${checking ? ' is-checking' : ''}`}
+    type="button"
+    aria-label={checking ? 'Проверяем доступность серверов по TCP' : 'Проверить доступность серверов по TCP'}
+    disabled={checking || disabled}
+    onClick={onClick}
+  >
+    <span>TCP</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>
+  </button>;
+}
+
 function ServerRow({ server, selected, favorite, ping, disabled, index, onSelect, onFavorite }) {
-  const health = serverHealthText(ping);
+  const health = ping?.checking ? 'Проверяем TCP' : serverHealthText(ping);
 
   return <div className={`client-server-row${selected ? ' is-selected' : ''}${onFavorite ? ' has-favorite' : ''}`}>
     <button
@@ -58,7 +84,7 @@ function ServerRow({ server, selected, favorite, ping, disabled, index, onSelect
       onClick={() => onSelect(server.id)}
     >
       <strong>{server.label}</strong>
-      <small title={ping?.checkedAt || undefined}>{health}</small>
+      <ServerHealth ping={ping} />
     </button>
     {onFavorite && <button
       className={`client-server-favorite${favorite ? ' is-active' : ''}`}
@@ -136,23 +162,29 @@ export function ServerPicker({
   async function checkVisible() {
     const ids = [...new Set([selectedServerId, ...visible.map(({ id }) => id)].filter(Boolean))].slice(0, 30);
     if (!ids.length) return;
+    const startedAt = performance.now();
     setChecking(true);
     setPings((current) => ({
       ...current,
-      ...Object.fromEntries(ids.map((id) => [id, { checking: true }])),
+      ...Object.fromEntries(ids.map((id) => [id, { ...current[id], checking: true }])),
     }));
     try {
       const data = await api.servers.ping(ids);
       setPings((current) => ({
         ...current,
-        ...Object.fromEntries((data.results || []).map((result) => [result.id, result])),
+        ...Object.fromEntries((data.results || []).map((result) => [result.id, { ...result, checking: true }])),
       }));
     } catch {
       setPings((current) => ({
         ...current,
-        ...Object.fromEntries(ids.map((id) => [id, { error: true, checkedAt: new Date().toISOString() }])),
+        ...Object.fromEntries(ids.map((id) => [id, { error: true, checking: true, checkedAt: new Date().toISOString() }])),
       }));
     } finally {
+      await new Promise((resolve) => setTimeout(resolve, Math.max(0, 700 - (performance.now() - startedAt))));
+      setPings((current) => ({
+        ...current,
+        ...Object.fromEntries(ids.map((id) => [id, { ...current[id], checking: false }])),
+      }));
       setChecking(false);
     }
   }
@@ -167,9 +199,7 @@ export function ServerPicker({
     return <section className="client-servers" aria-label="Выберите сервер">
       {prompt && <span className="client-server-prompt">Выберите сервер</span>}
       <div className="client-server-toolbar is-single">
-        <button className="client-server-check" type="button" disabled={checking} onClick={checkVisible}>
+        <ServerCheckButton checking={checking} onClick={checkVisible} />
-          {checking ? 'Проверяем…' : 'Проверить TCP'}
-        </button>
       </div>
       <div className="client-server-grid">
         <ServerRow
@@ -217,9 +247,7 @@ export function ServerPicker({
         <span>Поиск и фильтры</span>
         <svg viewBox="0 0 12 8" aria-hidden="true"><path d="m1 1 5 5 5-5" /></svg>
       </button>
-      <button className="client-server-check" type="button" disabled={checking || !servers.length} onClick={checkVisible}>
+      <ServerCheckButton checking={checking} disabled={!servers.length} onClick={checkVisible} />
-        {checking ? 'Проверяем…' : 'Проверить TCP'}
-      </button>
     </div>
 
     <div className="client-server-mode-panels">
@@ -286,9 +314,10 @@ export function ServerPicker({
               onClick={() => select(autoServer(servers)?.id, true)}
             >
               <strong>Auto</strong>
-              <small title={pings[selectedServerId]?.checkedAt || undefined}>
+              <ServerHealth
-                {autoActive ? serverHealthText(pings[selectedServerId]) : 'Первый стабильный сервер'}
+                ping={autoActive ? pings[selectedServerId] : undefined}
-              </small>
+                fallback={autoActive ? undefined : 'Первый стабильный сервер'}
+              />
             </button>
             {selected && <ServerRow
               server={selected}

src/web/styles.css

@@ -2717,6 +2717,34 @@ p {
   text-align: center;
 }
 
+.client-server-health {
+  min-height: 14px;
+  display: grid;
+  place-items: center;
+}
+
+.client-server-health > span {
+  grid-area: 1 / 1;
+  transition: opacity 420ms ease, filter 520ms cubic-bezier(0.16, 1, 0.3, 1), color 520ms ease;
+}
+
+.client-server-health-checking {
+  color: var(--client-accent);
+  opacity: 0;
+  filter: blur(4px);
+  text-shadow: 0 0 8px color-mix(in oklch, var(--client-accent) 42%, transparent);
+}
+
+.client-server-health.is-checking > span:first-child {
+  opacity: 0.32;
+  filter: blur(2px);
+}
+
+.client-server-health.is-checking .client-server-health-checking {
+  opacity: 1;
+  filter: blur(0);
+}
+
 .client-servers.is-scalable {
   width: min(100%, 360px);
   margin-inline: auto;
@@ -2766,8 +2794,37 @@ p {
   border: 0;
   background: transparent;
   color: var(--client-muted);
-  font: 700 8px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
   cursor: pointer;
+  transition: color 300ms ease, opacity 300ms ease, text-shadow 500ms ease;
+}
+
+.client-server-check svg {
+  width: 13px;
+  height: 13px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.client-server-check.is-checking {
+  color: var(--client-accent);
+  opacity: 1;
+  text-shadow: 0 0 9px color-mix(in oklch, var(--client-accent) 46%, transparent);
+}
+
+.client-server-check.is-checking svg {
+  animation: client-server-check-spin 700ms linear infinite;
+}
+
+@keyframes client-server-check-spin {
+  to { transform: rotate(360deg); }
 }
 
 .client-server-check:hover:not(:disabled),
@@ -2782,6 +2839,9 @@ p {
 
 .client-server-check:disabled {
   cursor: default;
+}
+
+.client-server-check:disabled:not(.is-checking) {
   opacity: 0.55;
 }
 
@@ -3553,6 +3613,9 @@ p {
   .client-usage > strong,
   .client-server,
   .client-server-auto,
+  .client-server-health > span,
+  .client-server-check,
+  .client-server-check svg,
   .client-server-mode-toggle,
   .client-server-mode-toggle svg,
   .client-server-mode-panel,

test/web/server-picker.test.js

@@ -42,6 +42,9 @@ test('server picker checks health once on load, keeps manual refresh and bounds
   assert.match(picker, /if \(initialCheckStarted\.current \|\| !servers\.length\) return/);
   assert.match(picker, /initialCheckStarted\.current = true;\s*checkVisible\(\)/);
   assert.match(picker, /onClick={checkVisible}/);
+  assert.match(picker, /\{ \.\.\.current\[id\], checking: true \}/);
+  assert.match(picker, /700 - \(performance\.now\(\) - startedAt\)/);
+  assert.match(picker, /\{ \.\.\.current\[id\], checking: false \}/);
   assert.match(picker, /\.slice\(page \* SERVER_RESULT_WINDOW, \(page \+ 1\) \* SERVER_RESULT_WINDOW\)/);
   assert.match(picker, /\.slice\(0, 30\)/);
   assert.match(picker, /Math\.min\(index, 7\)/);
@@ -52,8 +55,9 @@ test('server picker checks health once on load, keeps manual refresh and bounds
 });
 
 test('manual health remains visible for Auto and simple rows', () => {
-  assert.match(picker, /autoActive \? serverHealthText\(pings\[selectedServerId\]\)/);
+  assert.match(picker, /function ServerHealth/);
-  assert.match(picker, /className="client-server-check"/);
+  assert.match(picker, /client-server-health-checking/);
+  assert.match(picker, /function ServerCheckButton/);
   assert.match(picker, /server={servers\[0\]}[\s\S]*?ping={pings\[servers\[0\]\.id\]}/);
   assert.match(picker, /simpleServers\.map[\s\S]*?ping={pings\[server\.id\]}/);
 });