Update VPN client and gateway behavior

src/web/features/devices/DevicesPanel.tsx

@@ -5,8 +5,9 @@ import {
   useRef,
   useState,
   type CSSProperties,
-  type ReactNode,
 } from 'react';
+import { Drawer } from '../../ui/Drawer.js';
+import { Tooltip } from '../../ui/Tooltip.js';
 import { copyText } from '../../utils/clientControls.js';
 import {
   byteString,
@@ -40,10 +41,6 @@ function requestMessage(value: unknown) {
   return typeof message === 'string' ? message : undefined;
 }
 
-function Tooltip({ children }: { children: ReactNode }) {
-  return <span className="client-tooltip" role="tooltip">{children}</span>;
-}
-
 function TextMorph({ from, to }: { from: string; to: string }) {
   const anchor = from.length >= to.length ? from : to;
   return <span className="client-text-morph" aria-hidden="true">
@@ -280,22 +277,17 @@ export function DevicesPanel({ feature }: { feature: DevicesFeature }) {
   }
 
   return (
-    <aside
-      ref={panelRef}
+    <Drawer
+      panelRef={panelRef}
+      closeRef={closeRef}
       id="client-devices"
-      className={`client-drawer client-instructions client-devices${open ? ' is-open' : ''}`}
-      aria-labelledby="client-devices-title"
-      aria-hidden={!open}
-      inert={!open ? true : undefined}
+      className="client-instructions client-devices"
+      sheetClassName="client-instructions-sheet client-devices-sheet"
+      open={open}
+      labelledBy="client-devices-title"
+      closeLabel="Закрыть устройства"
+      onClose={onClose}
     >
-      <div className="client-drawer-sheet client-instructions-sheet client-devices-sheet">
-        <button
-          ref={closeRef}
-          className="client-drawer-close"
-          type="button"
-          aria-label="Закрыть устройства"
-          onClick={onClose}
-        >×</button>
         <header className="client-instructions-header client-devices-header">
           <div className="client-devices-kicker">
             <span>Gateway · {devices.length}</span>
@@ -583,7 +575,6 @@ export function DevicesPanel({ feature }: { feature: DevicesFeature }) {
             </article>;
           })}
         </div>
-      </div>
-    </aside>
+    </Drawer>
   );
 }