Refine device traffic chart collapse animation

src/web/features/devices/DevicesPanel.tsx

@@ -367,7 +367,8 @@ export function DevicesPanel({ feature }: { feature: DevicesFeature }) {
         <div className="client-devices-list" aria-live="polite" aria-busy={status === 'loading' || status === 'refreshing'}>
           {devices.map((device) => {
             const collapsing = Boolean(pinCollapses[device.id]);
-            const displayPinned = device.pinned || collapsing;
+            const expanded = device.pinned && !collapsing;
+            const showDetails = device.pinned || collapsing;
             const hasName = Boolean(device.alias || device.hostname);
             const title = device.alias || device.hostname || device.ip || 'Неизвестное устройство';
             const editing = editingId === device.id;
@@ -409,7 +410,7 @@ export function DevicesPanel({ feature }: { feature: DevicesFeature }) {
                 if (node) deviceNodes.current.set(device.id, node);
                 else deviceNodes.current.delete(device.id);
               }}
-              className={`client-device is-${device.status}${displayPinned ? ' is-pinned' : ''}${collapsing ? ' is-collapsing' : ''}`}
+              className={`client-device is-${device.status}${expanded ? ' is-pinned' : ''}${collapsing ? ' is-collapsing' : ''}`}
               key={device.id}
             >
               <span className="client-device-pin-wrap client-tooltip-anchor">
@@ -528,7 +529,7 @@ export function DevicesPanel({ feature }: { feature: DevicesFeature }) {
                 scale={trafficScale}
                 capacity={snapshot?.trafficHistoryCapacity || device.trafficHistory?.length || 1}
                 routeLabel={device.appliedPolicy === 'direct' ? 'Напрямую' : 'Gateway'}
-                pinned={displayPinned}
+                pinned={showDetails}
                 collapsing={collapsing}
                 onCollapseEnd={() => finishPinCollapse(device.id)}
               />

src/web/features/devices/TrafficChart.tsx

@@ -200,7 +200,7 @@ export function TrafficChart({
       '--traffic-chart-mid': `${(100 + TRAFFIC_CHART_HEADROOM) / 2}%`,
     } as CSSProperties}
     onAnimationEnd={(event: AnimationEvent<HTMLSpanElement>) => {
-      if (collapsing && event.animationName === 'client-device-chart-collapse') onCollapseEnd?.();
+      if (collapsing && event.animationName === 'client-device-traffic-plot-collapse') onCollapseEnd?.();
     }}
   >
     {pinned && max > 0n && <span className="client-device-traffic-axis" aria-hidden="true">