Animate Harbor brand swap arrow and bump client versions

src/web/components/ClientOverviewPage.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { api } from '../api.js';
 import {
@@ -483,13 +483,21 @@ function AnimatedSeconds({ value, padded = true }) {
 
 function HarborBrand({ isGateway, gatewayAvailable, gatewayDirect, blocked, onSetGatewayAuto }) {
   const [modeAnimating, setModeAnimating] = useState(false);
+  const [arrowTurns, setArrowTurns] = useState(gatewayDirect ? 0.5 : 0);
   const stopModeAnimationRef = useRef(false);
+  const previousGatewayDirectRef = useRef(gatewayDirect);
   const product = isGateway ? 'Gateway' : 'Connect';
   const switchable = !isGateway && gatewayAvailable;
   const label = gatewayDirect
     ? 'Игнорировать Harbor Gateway и использовать локальный VPN'
     : 'Использовать обнаруженный Harbor Gateway';
 
+  useLayoutEffect(() => {
+    if (previousGatewayDirectRef.current === gatewayDirect) return;
+    previousGatewayDirectRef.current = gatewayDirect;
+    setArrowTurns((turns) => turns + 0.5);
+  }, [gatewayDirect]);
+
   function startModeAnimation() {
     stopModeAnimationRef.current = false;
     setModeAnimating(true);
@@ -517,7 +525,12 @@ function HarborBrand({ isGateway, gatewayAvailable, gatewayDirect, blocked, onSe
           <em className="harbor-mode-connect">Connect</em>
           <em className="harbor-mode-gateway"><span>Gateway</span></em>
         </span>
-        <svg className="harbor-mode-swap" viewBox="0 0 18 18" aria-hidden="true">
+        <svg
+          className="harbor-mode-swap"
+          viewBox="0 0 18 18"
+          aria-hidden="true"
+          style={{ '--harbor-arrow-turn': `${arrowTurns}turn` }}
+        >
           <g className="is-connect"><path d="M3 6h10m-3-3 3 3-3 3" /></g>
           <g className="is-gateway"><path d="M15 12H5m3 3-3-3 3-3" /></g>
         </svg>