Update VPN client and gateway behavior

src/web/features/diagnostics/ConnectivityDiagnosticsPanel.tsx

@@ -6,6 +6,8 @@ import {
   type FormEvent,
 } from 'react';
 import { flushSync } from 'react-dom';
+import { Drawer } from '../../ui/Drawer.js';
+import { Tooltip } from '../../ui/Tooltip.js';
 import {
   CONNECTIVITY_IP_SOURCES,
   CONNECTIVITY_SITES,
@@ -324,23 +326,19 @@ export function ConnectivityDiagnosticsPanel({
   const { isOpen: open, panelRef, closeRef, close: onClose } = feature;
 
   return (
-    <aside
-      ref={panelRef}
+    <Drawer
+      panelRef={panelRef}
+      closeRef={closeRef}
+      sheetRef={sheetRef}
       id="client-diagnostics"
-      className={`client-drawer client-instructions client-diagnostics${open ? ' is-open' : ''}`}
-      aria-labelledby="client-diagnostics-title"
-      aria-hidden={!open}
-      inert={!open ? true : undefined}
+      className="client-instructions client-diagnostics"
+      sheetClassName="client-instructions-sheet client-diagnostics-sheet"
+      open={open}
+      labelledBy="client-diagnostics-title"
+      closeLabel="Закрыть диагностику"
+      onClose={onClose}
+      leading={<span ref={runnerRef} className="client-diagnostics-active-marker" aria-hidden="true" />}
     >
-      <div ref={sheetRef} className="client-drawer-sheet client-instructions-sheet client-diagnostics-sheet">
-        <span ref={runnerRef} className="client-diagnostics-active-marker" aria-hidden="true" />
-        <button
-          ref={closeRef}
-          className="client-drawer-close"
-          type="button"
-          aria-label="Закрыть диагностику"
-          onClick={onClose}
-        >×</button>
         <header className="client-instructions-header client-diagnostics-header">
           <span>{isGateway ? 'Gateway' : 'Connect'} · Direct ↔ VPN</span>
           <div className="client-diagnostics-title-row">
@@ -358,7 +356,7 @@ export function ConnectivityDiagnosticsPanel({
                   <path d="M20 11a8 8 0 1 0-2.3 6.7M20 5v6h-6" />
                 </svg>
               </button>
-              <span className="client-tooltip" role="tooltip">Проверить маршруты</span>
+              <Tooltip>Проверить маршруты</Tooltip>
             </span>
           </div>
         </header>
@@ -420,7 +418,7 @@ export function ConnectivityDiagnosticsPanel({
                 <span role="cell"><Status value={resultStatus(direct, running)} route={`Напрямую, ${site.label}`} /></span>
                 <span role="cell"><Status value={resultStatus(vpn, running, result?.vpn?.available !== false)} route={`VPN, ${site.label}`} /></span>
                 <button
-                  className="client-local-rule-delete"
+                  className="client-row-delete"
                   type="button"
                   aria-label={`Удалить сервис ${site.label}`}
                   disabled={serviceEditorBlocked}
@@ -466,7 +464,7 @@ export function ConnectivityDiagnosticsPanel({
               <button type="submit" disabled={serviceEditorBlocked}>Добавить</button>
             </span>
             <button
-              className="client-local-rule-delete"
+              className="client-row-delete"
               type="button"
               aria-label="Отменить добавление сервиса"
               onClick={() => removeService('draft')}
@@ -480,9 +478,9 @@ export function ConnectivityDiagnosticsPanel({
 
           {!sites.length && !adding && <p className="client-diagnostics-services-empty">Сервисов пока нет.</p>}
 
-          <div className="client-local-rule-add-slot client-diagnostics-add-slot">
+          <div className="client-row-add-slot client-diagnostics-add-slot">
             <button
-              className="client-local-rule-add"
+              className="client-row-add"
               type="button"
               disabled={serviceEditorBlocked || adding || customServices.length >= MAX_CUSTOM_DIAGNOSTIC_SERVICES}
               onClick={() => setAdding(true)}
@@ -493,7 +491,6 @@ export function ConnectivityDiagnosticsPanel({
           </div>
         </section>
 
-      </div>
-    </aside>
+    </Drawer>
   );
 }