Update VPN client and gateway behavior

src/web/features/devices/DevicesFeature.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { RailAction } from '../../ui/RailAction.js';
 import {
   formatByteString,
   formatLastSeen,
@@ -191,13 +192,13 @@ export function useDevicesFeature({
 export type DevicesFeature = ReturnType<typeof useDevicesFeature>;
 
 export function DevicesToggle({ feature, onToggle }: { feature: DevicesFeature; onToggle: () => void }) {
-  return <button
-    ref={feature.toggleRef}
-    className={`client-instructions-toggle client-devices-toggle${feature.isOpen ? ' is-open' : ''}`}
-    type="button"
-    aria-expanded={feature.isOpen}
-    aria-controls="client-devices"
-    aria-label={feature.isOpen ? 'Закрыть устройства' : 'Устройства Gateway'}
+  return <RailAction
+    buttonRef={feature.toggleRef}
+    className="client-instructions-toggle client-devices-toggle"
+    open={feature.isOpen}
+    controls="client-devices"
+    ariaLabel={feature.isOpen ? 'Закрыть устройства' : 'Устройства Gateway'}
+    label="Устройства"
     onClick={onToggle}
   >
     <svg viewBox="0 0 24 24" aria-hidden="true">
@@ -205,8 +206,7 @@ export function DevicesToggle({ feature, onToggle }: { feature: DevicesFeature;
       <rect className="client-rail-device-secondary" x="13.5" y="8" width="7" height="7" rx="1.5" />
       <path className="client-rail-device-link" d="M6 19h12M7 15v4M17 15v4" />
     </svg>
-    <span>Устройства</span>
-  </button>;
+  </RailAction>;
 }
 
 export function GatewayTrafficSummary({ feature, now }: { feature: DevicesFeature; now: number }) {

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>
   );
 }