From c4f1e90893874b3767690a85e7472c6e7a0b9e42 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sun, 21 Dec 2025 09:29:14 +0800
Subject: [PATCH] style(settings): unify tab transition animations

Add framer-motion fade-in and slide-up animations to General and
Advanced tabs, matching the existing Usage and About tab animations.
---
 src/components/settings/SettingsPage.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/settings/SettingsPage.tsx b/src/components/settings/SettingsPage.tsx
index 6ccba2531..ddffc0dd5 100644
--- a/src/components/settings/SettingsPage.tsx
+++ b/src/components/settings/SettingsPage.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { motion } from "framer-motion";
 import {
   Loader2,
   Save,
@@ -223,7 +224,12 @@ export function SettingsPage({
           <div className="flex-1 overflow-y-auto overflow-x-hidden pr-2">
             <TabsContent value="general" className="space-y-6 mt-0">
               {settings ? (
-                <>
+                <motion.div
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.3 }}
+                  className="space-y-6"
+                >
                   <LanguageSettings
                     value={settings.language}
                     onChange={(lang) => handleAutoSave({ language: lang })}
@@ -233,13 +239,18 @@ export function SettingsPage({
                     settings={settings}
                     onChange={handleAutoSave}
                   />
-                </>
+                </motion.div>
               ) : null}
             </TabsContent>
 
             <TabsContent value="advanced" className="space-y-6 mt-0 pb-6">
               {settings ? (
-                <div className="space-y-4">
+                <motion.div
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.3 }}
+                  className="space-y-4"
+                >
                   <Accordion
                     type="multiple"
                     defaultValue={[]}
@@ -494,7 +505,7 @@ export function SettingsPage({
                       )}
                     </Button>
                   </div>
-                </div>
+                </motion.div>
               ) : null}
             </TabsContent>