Simplify device status display and bump client versions

src/shared/versions.js

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

src/web/components/DevicesPanel.jsx

@@ -6,11 +6,6 @@ import {
   sortDevicesByTraffic,
 } from '../utils/format.js';
 
-const STATUS_LABELS = {
-  online: 'В сети',
-  recent: 'Недавно',
-  offline: 'Не в сети',
-};
 const AUTO_REFRESH_MS = 15_000;
 const DEVICE_MOVE_MS = 520;
 
@@ -250,7 +245,7 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
             const editing = editingId === device.id;
             const saving = savingId === device.id;
             const seen = formatLastSeen(device.lastSeenAt);
-            const uncertainIdentity = device.confidence !== 'high';
+            const online = device.status === 'online';
             const download = formatByteString(device.downloadBytes);
             const upload = formatByteString(device.uploadBytes);
             const policyBusy = device.policyStatus === 'applying';
@@ -285,7 +280,6 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
               key={device.id}
             >
               <div className="client-device-heading">
-                <span className="client-device-status">{STATUS_LABELS[device.status]}</span>
                 {editing ? (
                   <form className="client-device-alias" onSubmit={(event) => saveAlias(event, device)}>
                     <input
@@ -350,14 +344,6 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                 <div className="client-device-addresses">
                   {title !== device.ip && device.ip && <span>{device.ip}</span>}
                   {device.manufacturer && <span className="client-device-manufacturer">{device.manufacturer}</span>}
-                  {uncertainIdentity && <span className="client-device-identity client-tooltip-anchor" tabIndex="0" aria-label="Пояснение идентификации устройства">
-                      ⓘ
-                      <Tooltip>{device.confidence === 'medium'
-                        ? 'Устройство использует приватный MAC, производитель может не определиться'
-                        : device.confidence === 'ambiguous'
-                          ? 'Gateway видит это устройство с несколькими IP или интерфейсами, поэтому индивидуальное правило небезопасно'
-                          : 'Устройство определено приблизительно'}</Tooltip>
-                    </span>}
                 </div>
                 <span className="client-device-policy-wrap client-tooltip-anchor">
                   <button
@@ -373,9 +359,12 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                   </button>
                   <Tooltip>{policyTooltip}</Tooltip>
                 </span>
-                <span className="client-device-last-seen" tabIndex="0">
-                  <time dateTime={device.lastSeenAt} aria-label={seen.tooltip}>
-                    <TextMorph from={seen.label} to={seen.relative} />
+                <span className={`client-device-last-seen${online ? ' is-online' : ''}`} tabIndex="0">
+                  <time
+                    dateTime={device.lastSeenAt}
+                    aria-label={`${online ? 'В сети' : 'Не в сети'}. Последний контакт: ${seen.tooltip}`}
+                  >
+                    {online ? 'В сети' : <TextMorph from={seen.label} to={seen.relative} />}
                   </time>
                 </span>
               </div>

src/web/styles.css

@@ -885,7 +885,7 @@ p {
 
 .client-device-heading {
   display: grid;
-  grid-template-columns: 60px minmax(0, 1fr) auto 32px;
+  grid-template-columns: minmax(0, 1fr) auto 32px;
   align-items: center;
   gap: 6px;
   min-height: 28px;
@@ -907,33 +907,6 @@ p {
   white-space: nowrap;
 }
 
-.client-device-status {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--client-muted);
-  font-size: 9px;
-  white-space: nowrap;
-}
-
-.client-device-status::before {
-  flex: 0 0 auto;
-  width: 6px;
-  height: 6px;
-  display: inline-block;
-  border-radius: 50%;
-  background: currentColor;
-  content: '';
-}
-
-.client-device.is-online .client-device-status {
-  color: var(--client-accent);
-}
-
-.client-device.is-offline .client-device-status {
-  opacity: 0.56;
-}
-
 .client-device-edit-wrap,
 .client-device-pin-wrap {
   width: 28px;
@@ -996,7 +969,6 @@ p {
   grid-template-columns: minmax(0, 1fr) 72px auto;
   align-items: center;
   gap: 8px;
-  margin-left: 66px;
   color: var(--client-muted);
   font-size: 9px;
   line-height: 1.5;
@@ -1019,19 +991,17 @@ p {
   content: '·';
 }
 
-.client-device-identity {
-  position: relative;
-  margin-left: 4px;
-  color: var(--client-accent);
-  cursor: help;
-}
-
 .client-device-last-seen {
   color: var(--client-text);
   cursor: default;
   white-space: nowrap;
 }
 
+.client-device-last-seen.is-online {
+  color: var(--client-accent);
+  font-weight: 700;
+}
+
 .client-device-pin-wrap.client-tooltip-anchor > .client-tooltip {
   right: 0;
   left: auto;
@@ -1086,8 +1056,7 @@ p {
   transform: scale(1);
 }
 
-.client-device-last-seen:focus-visible,
-.client-device-identity:focus-visible {
+.client-device-last-seen:focus-visible {
   border-radius: 3px;
   outline: 2px solid var(--client-accent);
   outline-offset: 3px;

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, /<TextMorph from=\{seen\.label\} to=\{seen\.relative\} \/>/);
+  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, /device\.interface/);
   assert.doesNotMatch(panel, /device\.mac/);
+  assert.doesNotMatch(panel, /client-device-identity|Пояснение идентификации устройства|ⓘ/);
   assert.match(panel, /device\.confidence === 'ambiguous'/);
   assert.match(panel, /sortDevicesByTraffic\(snapshot\?\.devices, sortDirection\)/);
   assert.match(panel, /Трафик временно не обновляется/);
@@ -50,8 +53,10 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   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]*gap: 3px;[\s\S]*padding: 10px 8px/);
-  assert.match(styles, /\.client-device-heading \{[\s\S]*grid-template-columns: 60px minmax\(0, 1fr\) auto 32px/);
+  assert.match(styles, /\.client-device-heading \{[\s\S]*grid-template-columns: minmax\(0, 1fr\) auto 32px/);
   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-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/);
   assert.match(styles, /\.client-device-pin-wrap\.client-tooltip-anchor:hover > \.client-tooltip[\s\S]*translate\(0, 0\)/);