refactor: move proxy toggle into panel and surface app takeover options

Move the proxy on/off switch from the accordion header into the panel
content area, placing it right above the app takeover section. This
ensures users see the takeover options immediately after enabling the
proxy, preventing the common pitfall of running the proxy without
actually taking over any app.

- Simplify accordion trigger to standard style with Badge only
- Add AnimatePresence animation for takeover section reveal
- Remove duplicate takeover switches from running info card
- Update stoppedDescription i18n to reference "above toggle"
- Add proxy.takeover.hint key in zh/en/ja

src/components/settings/ProxyTabContent.tsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { Server, Activity, ChevronDown, Zap, Globe } from "lucide-react";
+import { Server, Activity, Zap, Globe } from "lucide-react";
 import { motion } from "framer-motion";
 import { useTranslation } from "react-i18next";
 import {
@@ -10,8 +9,6 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Switch } from "@/components/ui/switch";
-import { ToggleRow } from "@/components/ui/toggle-row";
 import { Badge } from "@/components/ui/badge";
 import { ProxyPanel } from "@/components/proxy";
 import { AutoFailoverConfigPanel } from "@/components/proxy/AutoFailoverConfigPanel";
@@ -76,28 +73,22 @@ export function ProxyTabContent({
         {/* Local Proxy */}
         <AccordionItem
           value="proxy"
-          className="rounded-xl glass-card overflow-hidden [&[data-state=open]>.accordion-header]:bg-muted/50"
+          className="rounded-xl glass-card overflow-hidden"
         >
-          <AccordionPrimitive.Header className="accordion-header flex items-center justify-between px-6 py-4 hover:bg-muted/50">
-            <AccordionPrimitive.Trigger className="flex flex-1 items-center justify-between hover:no-underline [&[data-state=open]>svg]:rotate-180">
-              <div className="flex items-center gap-3">
-                <Server className="h-5 w-5 text-green-500" />
-                <div className="text-left">
-                  <h3 className="text-base font-semibold">
-                    {t("settings.advanced.proxy.title")}
-                  </h3>
-                  <p className="text-sm text-muted-foreground font-normal">
-                    {t("settings.advanced.proxy.description")}
-                  </p>
-                </div>
+          <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
+            <div className="flex items-center gap-3">
+              <Server className="h-5 w-5 text-green-500" />
+              <div className="text-left">
+                <h3 className="text-base font-semibold">
+                  {t("settings.advanced.proxy.title")}
+                </h3>
+                <p className="text-sm text-muted-foreground font-normal">
+                  {t("settings.advanced.proxy.description")}
+                </p>
               </div>
-              <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
-            </AccordionPrimitive.Trigger>
-
-            <div className="flex items-center gap-4 pl-4">
               <Badge
                 variant={isRunning ? "default" : "secondary"}
-                className="gap-1.5 h-6"
+                className="gap-1.5 h-6 ml-auto mr-2"
               >
                 <Activity
                   className={`h-3 w-3 ${isRunning ? "animate-pulse" : ""}`}
@@ -106,28 +97,17 @@ export function ProxyTabContent({
                   ? t("settings.advanced.proxy.running")
                   : t("settings.advanced.proxy.stopped")}
               </Badge>
-              <Switch
-                checked={isRunning}
-                onCheckedChange={handleToggleProxy}
-                disabled={isProxyPending}
-              />
             </div>
-          </AccordionPrimitive.Header>
+          </AccordionTrigger>
           <AccordionContent className="px-6 pb-6 pt-4 border-t border-border/50">
-            <ToggleRow
-              icon={<Zap className="h-4 w-4 text-green-500" />}
-              title={t("settings.advanced.proxy.enableFeature")}
-              description={t(
-                "settings.advanced.proxy.enableFeatureDescription",
-              )}
-              checked={settings?.enableLocalProxy ?? false}
-              onCheckedChange={(checked) =>
+            <ProxyPanel
+              enableLocalProxy={settings?.enableLocalProxy ?? false}
+              onEnableLocalProxyChange={(checked) =>
                 onAutoSave({ enableLocalProxy: checked })
               }
+              onToggleProxy={handleToggleProxy}
+              isProxyPending={isProxyPending}
             />
-            <div className="mt-4">
-              <ProxyPanel />
-            </div>
           </AccordionContent>
         </AccordionItem>