base working button with saved state

src/features/VpnControl.tsx

@@ -1,44 +1,44 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Power } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useTranslation } from "react-i18next";
 import { invoke } from "@tauri-apps/api/core";
-import { TunnelConfig, startVpn, stopVpn } from "vpn-plugin";
+import {
+  TunnelConfig,
+  checkActualVpnStatus,
+  startVpn,
+  stopVpn,
+} from "vpn-plugin";
+import { useVpnStore } from "@/store/useVpnStore";
 
 export function VpnControl() {
-  const [status, setStatus] = useState<"idle" | "connecting" | "connected">(
-    "idle",
-  );
+  const { status, setStatus } = useVpnStore();
   const handleToggle = async () => {
     try {
       if (status === "idle") {
         setStatus("connecting");
 
-        // Подготавливаем конфигурацию (замените на нужные вам значения)
         const config: TunnelConfig = {
           address: "10.0.0.1",
           prefix: 24,
           dns: "10.0.0.2",
-          mtu: 1500,
+          mtu: 1280,
         };
-
-        // Вызываем вашу функцию-обертку
-        // ip и port берем из вашего примера
         await startVpn(config, "62.60.244.156", 443);
-
-        setStatus("connected");
       } else {
-        // Вызываем функцию для остановки
         await stopVpn();
-        setStatus("idle");
       }
     } catch (error) {
-      console.error("Ошибка управления VPN:", error);
+      console.error("VPN Toggle Error:", error);
       setStatus("idle");
     }
   };
 
+  useEffect(() => {
+    useVpnStore.getState().init();
+  }, []);
+
   const { t } = useTranslation();
 
   const isActive = status !== "idle";