Refine server picker layout and bump Harbor versions

src/shared/versions.js

@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.8.6',
-  gatewayClient: '0.8.6',
+  macClient: '0.8.7',
+  gatewayClient: '0.8.7',
   gatewayBackend: '0.8.0',
 });
 

src/web/components/ServerPicker.jsx

@@ -59,16 +59,16 @@ function ServerHealth({ ping, fallback }) {
 
 function ServerCheckButton({ checking, disabled, onClick }) {
   return <button
-    className={`client-server-check client-tooltip-anchor${checking ? ' is-checking' : ''}`}
+    className={`client-server-check${checking ? ' is-checking' : ''}`}
     type="button"
     aria-label={checking ? 'Проверяем пинг серверов' : 'Проверить пинг серверов'}
     disabled={checking || disabled}
     onClick={onClick}
   >
+    <span>{checking ? 'Проверяем' : 'Проверить пинг'}</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>
-    <span className="client-tooltip" role="tooltip">{checking ? 'Проверяем пинг…' : 'Проверить пинг'}</span>
   </button>;
 }
 
@@ -86,15 +86,17 @@ function ServerRow({ server, selected, favorite, ping, disabled, index, onSelect
       onClick={() => onSelect(server.id)}
     >
       <strong>{server.label}</strong>
-      <ServerHealth ping={ping} />
     </button>
-    {onFavorite && <button
-      className={`client-server-favorite${favorite ? ' is-active' : ''}`}
-      type="button"
-      aria-pressed={favorite}
-      aria-label={`${favorite ? 'Убрать из избранного' : 'Добавить в избранное'}: ${server.label}`}
-      onClick={() => onFavorite(server.id)}
-    >★</button>}
+    {(ping || onFavorite) && <div className="client-server-meta">
+      <ServerHealth ping={ping} />
+      {onFavorite && <button
+        className={`client-server-favorite${favorite ? ' is-active' : ''}`}
+        type="button"
+        aria-pressed={favorite}
+        aria-label={`${favorite ? 'Убрать из избранного' : 'Добавить в избранное'}: ${server.label}`}
+        onClick={() => onFavorite(server.id)}
+      >★</button>}
+    </div>}
   </div>;
 }
 
@@ -195,9 +197,7 @@ export function ServerPicker({
       {prompt && <span className="client-server-prompt">Выберите сервер</span>}
       <div className="client-server-toolbar is-single">
         <span className="client-server-toolbar-title">Список серверов</span>
-        <div className="client-server-toolbar-actions">
-          <ServerCheckButton checking={checking} onClick={checkVisible} />
-        </div>
+        <ServerCheckButton checking={checking} onClick={checkVisible} />
       </div>
       <div className="client-server-grid">
         <ServerRow
@@ -236,19 +236,17 @@ export function ServerPicker({
     {prompt && <span className="client-server-prompt">Выберите сервер</span>}
     <div className="client-server-toolbar">
       <span className="client-server-toolbar-title">Список серверов</span>
-      <div className="client-server-toolbar-actions">
-        <button
-          className={`client-server-mode-toggle${advanced ? ' is-open' : ''}`}
-          type="button"
-          aria-expanded={advanced}
-          aria-label={advanced ? 'Скрыть поиск и фильтры' : 'Показать поиск и фильтры'}
-          onClick={() => setAdvanced((current) => !current)}
-        >
-          <span>Поиск и фильтры</span>
-          <svg viewBox="0 0 12 8" aria-hidden="true"><path d="m1 1 5 5 5-5" /></svg>
-        </button>
-        <ServerCheckButton checking={checking} disabled={!servers.length} onClick={checkVisible} />
-      </div>
+      <ServerCheckButton checking={checking} disabled={!servers.length} onClick={checkVisible} />
+      <button
+        className={`client-server-mode-toggle${advanced ? ' is-open' : ''}`}
+        type="button"
+        aria-expanded={advanced}
+        aria-label={advanced ? 'Скрыть поиск и фильтры' : 'Показать поиск и фильтры'}
+        onClick={() => setAdvanced((current) => !current)}
+      >
+        <span>Поиск и фильтры</span>
+        <svg viewBox="0 0 12 8" aria-hidden="true"><path d="m1 1 5 5 5-5" /></svg>
+      </button>
     </div>
 
     <div className="client-server-mode-panels">

src/web/styles.css

@@ -2598,17 +2598,22 @@ p {
   display: grid;
   grid-template-columns: 1fr;
   gap: 8px;
-  width: min(100%, 180px);
+  width: min(100%, 220px);
   margin-inline: auto;
 }
 
+.client-server-row {
+  width: 220px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
+  align-items: center;
+}
+
 .client-server {
   min-width: 0;
   min-height: 44px;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
-  align-items: baseline;
-  gap: 0;
+  place-items: center;
   padding: 6px 4px 7px;
   border: 0;
   border-bottom: 1px solid var(--client-border);
@@ -2663,8 +2668,6 @@ p {
 }
 
 .client-server strong {
-  grid-column: 2;
-  justify-self: center;
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2681,8 +2684,6 @@ p {
 }
 
 .client-server-health {
-  grid-column: 3;
-  justify-self: end;
   display: grid;
   place-items: center;
   white-space: nowrap;
@@ -2711,7 +2712,7 @@ p {
 }
 
 .client-servers.is-scalable {
-  width: min(100%, 360px);
+  width: min(100%, 300px);
   margin-inline: auto;
 }
 
@@ -2724,13 +2725,14 @@ p {
 .client-server-toolbar {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  grid-template-rows: 32px 28px;
   align-items: center;
-  min-height: 32px;
-  margin-bottom: 4px;
+  margin-bottom: 0;
 }
 
 .client-server-toolbar-title {
   grid-column: 2;
+  grid-row: 1;
   color: var(--client-muted);
   font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
   letter-spacing: 0.08em;
@@ -2738,16 +2740,14 @@ p {
   white-space: nowrap;
 }
 
-.client-server-toolbar-actions {
-  grid-column: 3;
-  justify-self: end;
-  display: flex;
-  align-items: center;
-  gap: 2px;
+.client-server-toolbar.is-single {
+  grid-template-rows: 32px;
 }
 
 .client-server-mode-toggle {
-  min-height: 32px;
+  grid-column: 2;
+  grid-row: 2;
+  min-height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2763,7 +2763,10 @@ p {
 }
 
 .client-server-check {
-  width: 32px;
+  grid-column: 3;
+  grid-row: 1;
+  justify-self: start;
+  width: 104px;
   height: 32px;
   min-height: 32px;
   padding: 0;
@@ -2773,13 +2776,15 @@ p {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 5px;
+  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: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.6;
@@ -3032,18 +3037,22 @@ p {
   gap: 5px;
 }
 
-.client-server-row.has-favorite {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 38px;
+.client-server-meta {
+  grid-column: 3;
+  justify-self: start;
+  display: flex;
   align-items: center;
+  gap: 4px;
+  margin-left: 10px;
 }
 
 .client-server-row .client-server {
-  width: 100%;
+  grid-column: 2;
+  width: 120px;
 }
 
 .client-server-favorite {
-  width: 38px;
+  width: 28px;
   height: 44px;
   padding: 0;
   border: 0;
@@ -3485,10 +3494,22 @@ p {
   }
 
   .client-server-check {
-    width: 44px;
+    width: 104px;
     height: 44px;
   }
 
+  .client-server-toolbar {
+    grid-template-rows: 44px 44px;
+  }
+
+  .client-server-toolbar.is-single {
+    grid-template-rows: 44px;
+  }
+
+  .client-server-favorite {
+    width: 44px;
+  }
+
   .client-local-rule {
     grid-template-columns: 44px minmax(0, 1fr) 44px;
   }