Refine device panel layout and IP copy feedback

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>