increased the size of the proxy enable button

src/pages/home.tsx

@@ -1,10 +1,9 @@
-import React, { useRef, useMemo, useCallback } from 'react';
+import React, { useRef, useMemo, useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useLockFn } from 'ahooks';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 
-// Импорты
 import { useProfiles } from '@/hooks/use-profiles';
 import { ProfileViewer, ProfileViewerRef } from '@/components/profile/profile-viewer';
 import {
@@ -12,7 +11,7 @@ import {
   DropdownMenuSeparator, DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
-import { ChevronsUpDown, Check, PlusCircle, Menu, Wrench, AlertTriangle } from 'lucide-react';
+import { ChevronsUpDown, Check, PlusCircle, Menu, Wrench, AlertTriangle, Loader2 } from 'lucide-react';
 import { useVerge } from '@/hooks/use-verge';
 import { useSystemState } from '@/hooks/use-system-state';
 import { useServiceInstaller } from '@/hooks/useServiceInstaller';
@@ -25,24 +24,19 @@ import { closeAllConnections } from '@/services/api';
 const MinimalHomePage: React.FC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-
+  const [isToggling, setIsToggling] = useState(false);
-  // --- НАЧАЛО ИЗМЕНЕНИЙ 1: Правильно используем хук ---
   const { profiles, patchProfiles, activateSelected, mutateProfiles } = useProfiles();
   const viewerRef = useRef<ProfileViewerRef>(null);
 
-  // Воссоздаем логику фильтрации профилей здесь
   const profileItems = useMemo(() => {
     const items = profiles && Array.isArray(profiles.items) ? profiles.items : [];
     const allowedTypes = ["local", "remote"];
-    // Добавляем явное указание типа, чтобы избежать ошибок
     return items.filter((i: any) => i && allowedTypes.includes(i.type!));
   }, [profiles]);
 
   const currentProfileName = useMemo(() => {
-    // Находим в списке профилей тот, чей uid совпадает с активным
     return profileItems.find(p => p.uid === profiles?.current)?.name || profiles?.current;
   }, [profileItems, profiles?.current]);
-  // Воссоздаем логику активации профиля здесь
   const activateProfile = useCallback(async (uid: string, notifySuccess: boolean) => {
     try {
       await patchProfiles({ current: uid });
@@ -53,7 +47,7 @@ const MinimalHomePage: React.FC = () => {
       }
     } catch (err: any) {
       toast.error(err.message || err.toString());
-      mutateProfiles(); // Откатываем в случае ошибки
+      mutateProfiles();
     }
   }, [patchProfiles, activateSelected, mutateProfiles, t]);
 
@@ -61,7 +55,6 @@ const MinimalHomePage: React.FC = () => {
     if (profiles?.current === uid) return;
     await activateProfile(uid, true);
   });
-  // --- КОНЕЦ ИЗМЕНЕНИЙ 1 ---
 
   const { verge, patchVerge, mutateVerge } = useVerge();
   const { isAdminMode, isServiceMode } = useSystemState();
@@ -71,6 +64,7 @@ const MinimalHomePage: React.FC = () => {
 
   const handleToggleProxy = useLockFn(async () => {
     const turningOn = !isProxyEnabled;
+    setIsToggling(true);
     try {
       if (turningOn) {
         await patchVerge({ enable_tun_mode: true, enable_system_proxy: false });
@@ -82,6 +76,8 @@ const MinimalHomePage: React.FC = () => {
       mutateVerge();
     } catch (error: any) {
       toast.error(t('Failed to toggle proxy'), { description: error.message });
+    } finally {
+      setIsToggling(false);
     }
   });
 
@@ -96,10 +92,13 @@ const MinimalHomePage: React.FC = () => {
 
   return (
     <div className="flex flex-col h-screen p-5">
-      <header className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-xs pt-5 z-20">
+      <header className="absolute top-0 left-0 right-0 p-5 flex items-center justify-between z-20">
+        <div className="w-10"></div>
+
+        <div className="flex-shrink-0">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-             <Button variant="outline" className="w-full">
+              <Button variant="outline" className="w-full max-w-[250px] sm:max-w-xs">
                 <span className="truncate">{currentProfileName}</span>
                 <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
               </Button>
@@ -120,9 +119,9 @@ const MinimalHomePage: React.FC = () => {
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
-      </header>
+        </div>
 
-      <div className="absolute top-5 right-5 z-20">
+        <div className="w-10">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button variant="outline" size="icon">
@@ -140,30 +139,35 @@ const MinimalHomePage: React.FC = () => {
               </DropdownMenuContent>
             </DropdownMenu>
         </div>
+      </header>
 
+      <div className="flex items-center justify-center flex-grow w-full">
+        <div className="flex flex-col items-center gap-8 pt-10">
 
-      <div className="flex flex-col items-center justify-center flex-grow text-center w-full">
+          <div className="text-center">
-        <h1 className="text-4xl mb-8 font-semibold" style={{ color: isProxyEnabled ? '#22c55e' : '#ef4444' }}>
+            <h1 className="text-4xl mb-2 font-semibold" style={{ color: isProxyEnabled ? '#22c55e' : '#ef4444' }}>
               {isProxyEnabled ? t('Connected') : t('Disconnected')}
             </h1>
+            <p className="h-6 text-sm text-muted-foreground transition-opacity duration-300">
+              {isToggling && (isProxyEnabled ? t('Disconnecting...') : t('Connecting...'))}
+            </p>
+          </div>
 
-        <div className="scale-[3.5] my-16">
+          <div className="scale-[7] my-16">
             <Switch
-            disabled={!isTunAvailable}
+              disabled={!isTunAvailable || isToggling}
               checked={!!isProxyEnabled}
               onCheckedChange={handleToggleProxy}
               aria-label={t("Toggle Proxy")}
             />
           </div>
 
-        <div className="w-full max-w-sm transition-all">
           {!isTunAvailable && (
-            <Alert variant="destructive" className="text-center flex flex-col items-center gap-3">
+            <div className="w-full max-w-sm">
-              <div className="flex items-center gap-2">
+                <Alert variant="destructive" className="text-center">
-                <AlertTriangle className="h-5 w-5" />
+                    <AlertTriangle className="h-4 w-4" />
                     <AlertTitle>{t("Attention Required")}</AlertTitle>
-              </div>
+                    <AlertDescription className="text-xs">
-              <AlertDescription>
                         {t("TUN requires Service Mode or Admin Mode")}
                     </AlertDescription>
                     {!isServiceMode && !isAdminMode && (
@@ -173,11 +177,13 @@ const MinimalHomePage: React.FC = () => {
                         </Button>
                     )}
                 </Alert>
+            </div>
           )}
+
+          <div className="w-full">
+              <ProxySelectors />
           </div>
 
-        <div className="w-full mt-8">
-            <ProxySelectors />
         </div>
       </div>