Refine device panel layout and IP copy feedback

src/shared/versions.js

@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.13.0',
-  gatewayClient: '0.14.0',
+  macClient: '0.13.1',
+  gatewayClient: '0.14.1',
   gatewayBackend: '0.14.0',
 });
 

src/web/components/ClientOverviewPage.jsx

@@ -1270,7 +1270,7 @@ export function ClientOverviewPage({
                     onClick={() => copyProxy(kind)}
                   >
                     <span className="client-copy-label">{label}</span>
-                    {copyFeedback?.kind === kind && <span className="client-copy-feedback" aria-hidden="true">{copyFeedback.failed ? 'ОШИБКА' : 'ГОТОВО'}</span>}
+                    {copyFeedback?.kind === kind && <span className="client-copy-feedback" aria-hidden="true">{copyFeedback.failed ? 'Ошибка' : 'Скопировано'}</span>}
                   </button>
                 ))}
               </div>

src/web/components/DevicesPanel.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { api } from '../api.js';
+import { copyText } from '../utils/clientControls.js';
 import {
   byteString,
   formatByteString,
@@ -33,8 +34,10 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
   const [refreshing, setRefreshing] = useState(false);
   const [refreshCycle, setRefreshCycle] = useState(0);
   const [sortDirection, setSortDirection] = useState('desc');
+  const [copyFeedback, setCopyFeedback] = useState(null);
   const deviceNodes = useRef(new Map());
   const previousPositions = useRef(new Map());
+  const copyTimer = useRef(null);
   const devices = useMemo(
     () => sortDevicesByTraffic(snapshot?.devices, sortDirection),
     [snapshot?.devices, sortDirection],
@@ -69,6 +72,8 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
     return () => clearTimeout(timer);
   }, [open, refreshCycle, refreshing, status]);
 
+  useEffect(() => () => clearTimeout(copyTimer.current), []);
+
   useLayoutEffect(() => {
     if (!open) {
       previousPositions.current.clear();
@@ -157,6 +162,18 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
     }
   }
 
+  async function copyDeviceIp(device) {
+    if (!device.ip) return;
+    clearTimeout(copyTimer.current);
+    try {
+      await copyText(device.ip);
+      setCopyFeedback({ id: device.id, failed: false });
+    } catch {
+      setCopyFeedback({ id: device.id, failed: true });
+    }
+    copyTimer.current = setTimeout(() => setCopyFeedback(null), 800);
+  }
+
   return (
     <aside
       ref={panelRef}
@@ -248,6 +265,9 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
           <p className="client-devices-empty">Gateway пока не видит устройств.</p>
         )}
 
+        <div className="client-live-region" role="status" aria-live="polite" aria-atomic="true">
+          {copyFeedback ? copyFeedback.failed ? 'Не удалось скопировать' : 'Скопировано' : ''}
+        </div>
         <div className="client-devices-list" aria-live="polite" aria-busy={status === 'loading' || status === 'refreshing'}>
           {devices.map((device) => {
             const title = device.alias || device.hostname || device.ip || 'Неизвестное устройство';
@@ -263,10 +283,8 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
             const proxyTotal = byteString(device.proxyDownloadBytes) + byteString(device.proxyUploadBytes);
             const gatewayTraffic = formatByteString(gatewayTotal.toString());
             const proxyTraffic = formatByteString(proxyTotal.toString());
-            const trafficLabel = [
-              gatewayTotal > 0n ? `Gateway: получено ${download}, отдано ${upload}` : '',
-              proxyTotal > 0n ? `Прокси: получено ${proxyDownload}, отдано ${proxyUpload}` : '',
-            ].filter(Boolean).join('. ');
+            const trafficLabel = `Gateway: получено ${download}, отдано ${upload}. Прокси: получено ${proxyDownload}, отдано ${proxyUpload}`;
+            const copied = copyFeedback?.id === device.id;
             const policyBusy = device.policyStatus === 'applying';
             const policyFailed = device.policyStatus === 'failed';
             const policyPending = device.policyStatus === 'pending';
@@ -312,7 +330,7 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                 <Tooltip>{device.pinned ? 'Открепить' : 'Закрепить'}</Tooltip>
               </span>
 
-              <div className="client-device-heading">
+              <div className="client-device-main">
                 {editing ? (
                   <form className="client-device-alias" onSubmit={(event) => saveAlias(event, device)}>
                     <input
@@ -327,7 +345,20 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                   </form>
                 ) : (
                   <div className="client-device-title">
-                    <h3>{title}</h3>
+                    {device.ip ? <h3 className="client-device-name-heading">
+                      <button
+                        className={`client-device-name${copied ? copyFeedback.failed ? ' is-copy-error' : ' is-copied' : ''}`}
+                        type="button"
+                        aria-label={`Скопировать IP ${device.ip} устройства ${title}`}
+                        onClick={() => copyDeviceIp(device)}
+                      >
+                        <span className="client-device-name-primary">{title}</span>
+                        <span className="client-device-name-ip" aria-hidden="true">{device.ip}</span>
+                        <span className="client-device-name-feedback" aria-hidden="true">
+                          {copied && copyFeedback.failed ? 'Ошибка' : 'Скопировано'}
+                        </span>
+                      </button>
+                    </h3> : <h3>{title}</h3>}
                     <span className="client-device-edit-wrap client-tooltip-anchor">
                       <button
                         className="client-device-edit"
@@ -346,40 +377,6 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                     </span>
                   </div>
                 )}
-                <span className="client-device-traffic-slot">
-                  {(gatewayTotal > 0n || proxyTotal > 0n) && <span
-                    className="client-device-traffic client-tooltip-anchor"
-                    tabIndex="0"
-                    aria-label={trafficLabel}
-                  >
-                    <span className="client-device-traffic-sources" aria-hidden="true">
-                      {gatewayTotal > 0n && <span>Gateway {gatewayTraffic}</span>}
-                      {proxyTotal > 0n && <span className="is-proxy">Прокси {proxyTraffic}</span>}
-                    </span>
-                    <Tooltip>{trafficLabel}</Tooltip>
-                  </span>}
-                </span>
-              </div>
-
-              <div className="client-device-meta">
-                <div className="client-device-addresses">
-                  {title !== device.ip && device.ip && <span>{device.ip}</span>}
-                  {device.manufacturer && <span className="client-device-manufacturer">{device.manufacturer}</span>}
-                </div>
-                <span className="client-device-policy-wrap client-tooltip-anchor">
-                  <button
-                    className={`client-device-policy is-${displayPolicy}${policyFailed ? ' is-failed' : ''}${policyPending ? ' is-pending' : ''}`}
-                    type="button"
-                    aria-label={`Маршрут устройства: ${displayPolicy === 'direct' ? 'полностью напрямую' : 'через правила Gateway'}. ${policyTooltip}`}
-                    aria-pressed={displayPolicy === 'direct'}
-                    aria-busy={policyBusy}
-                    disabled={saving || policyBusy || cannotEnableDirect}
-                    onClick={() => updatePolicy(device, policyTarget)}
-                  >
-                    {displayPolicy === 'direct' ? 'Напрямую' : 'VPN'}
-                  </button>
-                  <Tooltip>{policyTooltip}</Tooltip>
-                </span>
                 <span className={`client-device-last-seen${online ? ' is-online' : ''}`} tabIndex="0">
                   <time
                     dateTime={device.lastSeenAt}
@@ -389,6 +386,38 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                   </time>
                 </span>
               </div>
+
+              <span
+                className="client-device-traffic client-tooltip-anchor"
+                tabIndex="0"
+                aria-label={trafficLabel}
+              >
+                <span className="client-device-traffic-sources" aria-hidden="true">
+                  <span><b>Gateway</b><strong>{gatewayTraffic}</strong></span>
+                  <span className="is-proxy"><b>Прокси</b><strong>{proxyTraffic}</strong></span>
+                </span>
+                <Tooltip>{trafficLabel}</Tooltip>
+              </span>
+
+              <span className="client-device-policy-wrap client-tooltip-anchor">
+                <button
+                  className={`client-device-policy is-${displayPolicy}${policyFailed ? ' is-failed' : ''}${policyPending ? ' is-pending' : ''}`}
+                  type="button"
+                  aria-label={`Маршрут устройства: ${displayPolicy === 'direct' ? 'полностью напрямую' : 'через правила Gateway'}. ${policyTooltip}`}
+                  aria-pressed={displayPolicy === 'direct'}
+                  aria-busy={policyBusy}
+                  disabled={saving || policyBusy || cannotEnableDirect}
+                  onClick={() => updatePolicy(device, policyTarget)}
+                >
+                  {displayPolicy === 'direct' ? <svg viewBox="0 0 24 24" aria-hidden="true">
+                    <path d="M4 12h15M14 7l5 5-5 5" />
+                  </svg> : <svg viewBox="0 0 24 24" aria-hidden="true">
+                    <path d="M12 3 19 6v5c0 4.4-2.8 8-7 10-4.2-2-7-5.6-7-10V6l7-3Z" />
+                    <path d="m9 12 2 2 4-4" />
+                  </svg>}
+                </button>
+                <Tooltip>{policyTooltip}</Tooltip>
+              </span>
             </article>;
           })}
         </div>

src/web/styles.css

@@ -889,30 +889,33 @@ p {
 
 .client-device {
   display: grid;
-  grid-template-columns: 32px minmax(0, 1fr);
-  grid-template-rows: auto auto;
-  gap: 3px 4px;
-  padding: 10px 8px;
+  grid-template-columns: 32px minmax(0, 1fr) 104px 32px;
+  align-items: center;
+  gap: 6px;
+  padding: 8px;
   border-top: 1px solid color-mix(in oklch, var(--client-border) 72%, transparent);
 }
 
-.client-device-heading {
-  grid-column: 2;
-  grid-row: 1;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+.client-device-main {
+  min-width: 0;
+  display: flex;
   align-items: center;
-  gap: 6px;
-  min-height: 28px;
+  gap: 7px;
 }
 
 .client-device-title {
+  flex: 1 1 auto;
   min-width: 0;
   display: flex;
   align-items: center;
   gap: 4px;
 }
 
+.client-device-title h3 {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
 .client-device-title h3 {
   overflow: hidden;
   margin: 0;
@@ -922,6 +925,82 @@ p {
   white-space: nowrap;
 }
 
+.client-device-name {
+  width: 100%;
+  min-width: 0;
+  display: grid;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  background: transparent;
+  color: var(--client-text);
+  font: 700 14px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  letter-spacing: -0.03em;
+  text-align: left;
+  cursor: copy;
+}
+
+.client-device-name > span {
+  grid-area: 1 / 1;
+  overflow: hidden;
+  opacity: 1;
+  filter: blur(0);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transform: translateY(0);
+  transition: opacity 220ms ease, filter 320ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1), color 220ms ease;
+}
+
+.client-device-name-ip,
+.client-device-name-feedback {
+  opacity: 0;
+  filter: blur(5px);
+  transform: translateY(2px);
+}
+
+.client-device-name:hover .client-device-name-primary,
+.client-device-name:focus-visible .client-device-name-primary {
+  opacity: 0;
+  filter: blur(5px);
+  transform: translateY(-2px);
+}
+
+.client-device-name:hover .client-device-name-ip,
+.client-device-name:focus-visible .client-device-name-ip {
+  opacity: 1;
+  filter: blur(0);
+  transform: translateY(0);
+}
+
+.client-device-name.is-copied .client-device-name-primary,
+.client-device-name.is-copied .client-device-name-ip,
+.client-device-name.is-copy-error .client-device-name-primary,
+.client-device-name.is-copy-error .client-device-name-ip {
+  opacity: 0;
+  filter: blur(5px);
+}
+
+.client-device-name.is-copied .client-device-name-feedback,
+.client-device-name.is-copy-error .client-device-name-feedback {
+  opacity: 1;
+  filter: blur(0);
+  transform: translateY(0);
+}
+
+.client-device-name.is-copied .client-device-name-feedback {
+  color: var(--client-accent);
+}
+
+.client-device-name.is-copy-error .client-device-name-feedback {
+  color: oklch(0.68 0.15 28);
+}
+
+.client-device-name:focus-visible {
+  border-radius: 3px;
+  outline: 2px solid var(--client-accent);
+  outline-offset: 2px;
+}
+
 .client-device-edit-wrap,
 .client-device-pin-wrap {
   width: 28px;
@@ -942,9 +1021,6 @@ p {
 }
 
 .client-device-pin-wrap {
-  grid-column: 1;
-  grid-row: 1 / 3;
-  align-self: center;
   width: 32px;
   height: 32px;
 }
@@ -1001,37 +1077,13 @@ p {
   transform: translateY(-1px) rotate(-8deg) scale(0.94);
 }
 
-.client-device-meta {
-  grid-column: 2;
-  grid-row: 2;
-  min-width: 0;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 72px auto;
-  align-items: center;
-  gap: 8px;
-  color: var(--client-muted);
-  font-size: 9px;
-  line-height: 1.5;
-}
-
-.client-device-addresses {
-  min-width: 0;
-  display: flex;
-  overflow: hidden;
-  gap: 3px 0;
-}
-
-.client-device-addresses > span {
-  white-space: nowrap;
-}
-
-.client-device-addresses > span + span::before {
-  margin: 0 6px;
-  color: color-mix(in oklch, var(--client-muted) 58%, transparent);
-  content: '·';
-}
-
 .client-device-last-seen {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 116px;
+  overflow: hidden;
+  font-size: 8px;
+  text-overflow: ellipsis;
   color: var(--client-text);
   cursor: default;
   white-space: nowrap;
@@ -1102,50 +1154,50 @@ p {
   outline-offset: 3px;
 }
 
-.client-device-manufacturer {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--client-muted);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .client-device-traffic {
-  display: block;
-  max-width: min(240px, 42vw);
-  overflow: hidden;
+  width: 104px;
+  display: grid;
+  align-items: center;
   color: var(--client-text);
   font-variant-numeric: tabular-nums;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.client-device-traffic-slot {
-  min-width: 0;
-  font-size: 9px;
 }
 
 .client-device-traffic-sources {
-  display: flex;
-  gap: 5px;
-  overflow: hidden;
+  display: grid;
+  gap: 2px;
 }
 
 .client-device-traffic-sources span {
-  overflow: hidden;
-  text-overflow: ellipsis;
+  display: grid;
+  grid-template-columns: 41px minmax(0, 1fr);
+  align-items: baseline;
+  gap: 4px;
 }
 
-.client-device-traffic-sources span + span::before {
-  margin-right: 5px;
+.client-device-traffic-sources b {
   color: var(--client-muted);
-  content: '·';
+  font-size: 7px;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.client-device-traffic-sources strong {
+  overflow: hidden;
+  font-size: 8px;
+  font-weight: 600;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .client-device-traffic-sources .is-proxy {
   color: var(--client-accent);
 }
 
+.client-device-traffic-sources .is-proxy b {
+  color: color-mix(in oklch, var(--client-accent) 72%, var(--client-muted));
+}
+
 .client-device-traffic:focus-visible {
   border-radius: 3px;
   outline: 2px solid var(--client-accent);
@@ -1164,41 +1216,71 @@ p {
 }
 
 .client-device-policy-wrap {
-  width: 72px;
+  width: 32px;
   position: relative;
 }
 
 .client-device-policy {
-  width: 72px;
-  min-height: 22px;
-  padding: 0 5px;
-  border: 1px solid color-mix(in oklch, var(--client-border) 82%, transparent);
-  border-radius: 5px;
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
   background: transparent;
   color: var(--client-muted);
-  font: 700 8px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
-  text-transform: uppercase;
-  transition: border-color 180ms ease, color 180ms ease, opacity 180ms ease;
+  cursor: pointer;
+  transition: color 220ms ease, filter 320ms ease, opacity 180ms ease, background 220ms ease;
+}
+
+.client-device-policy svg {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.7;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .client-device-policy.is-direct {
-  border-color: color-mix(in oklch, var(--client-accent) 52%, var(--client-border));
   color: var(--client-accent);
 }
 
 .client-device-policy.is-failed {
-  border-color: oklch(0.62 0.13 28);
   color: oklch(0.7 0.12 28);
 }
 
 .client-device-policy.is-pending {
-  border-style: dashed;
+  opacity: 0.62;
 }
 
 .client-device-policy:hover:not(:disabled),
 .client-device-policy:focus-visible {
-  border-color: var(--client-accent);
+  background: color-mix(in oklch, var(--client-accent) 10%, transparent);
   color: var(--client-accent);
+  filter: drop-shadow(0 0 5px color-mix(in oklch, var(--client-accent) 36%, transparent));
+}
+
+.client-device-policy.is-direct:hover:not(:disabled) svg,
+.client-device-policy.is-direct:focus-visible svg {
+  transform: translateX(2px);
+}
+
+.client-device-policy.is-vpn:hover:not(:disabled) svg,
+.client-device-policy.is-vpn:focus-visible svg {
+  transform: translateY(-1px) rotate(3deg) scale(1.05);
+}
+
+.client-device-policy:focus-visible {
+  outline: 2px solid var(--client-accent);
+  outline-offset: 1px;
+}
+
+.client-device-policy:disabled {
+  cursor: wait;
 }
 
 .client-device-policy-wrap.client-tooltip-anchor > .client-tooltip {
@@ -1214,6 +1296,8 @@ p {
 }
 
 .client-device-alias {
+  flex: 1 1 auto;
+  min-width: 0;
   display: grid;
   grid-template-columns: minmax(0, 1fr) 28px 28px;
   align-items: center;
@@ -4187,6 +4271,8 @@ p {
   .client-device-pin,
   .client-device-pin svg,
   .client-device-policy,
+  .client-device-policy svg,
+  .client-device-name > span,
   .client-device-edit,
   .client-device-edit svg,
   .client-device-edit-wrap,