style(web): optimize settings tab and preference item order

apps/mobile/app.json

@@ -3,7 +3,7 @@
     "name": "EdgeEver",
     "slug": "edgeever",
     "scheme": "edgeever",
-    "version": "1.6.21",
+    "version": "1.6.22",
     "runtimeVersion": {
       "policy": "appVersion"
     },
@@ -28,7 +28,7 @@
     },
     "android": {
       "package": "org.edgeever.mobile",
-      "versionCode": 42,
+      "versionCode": 43,
       "adaptiveIcon": {
         "backgroundColor": "#d1fae5",
         "backgroundImage": "./assets/icon.png",

apps/web/src/components/SettingsPane.tsx

@@ -98,6 +98,24 @@ export const SettingsPane = ({
       hoverColorClass: "hover:bg-emerald-50/40",
       iconColorClass: "text-emerald-600",
     },
+    {
+      key: "ai",
+      label: t("settings.tabs.ai"),
+      icon: Sparkles,
+      colorClass: "text-emerald-700",
+      bgColorClass: "bg-emerald-50/80",
+      hoverColorClass: "hover:bg-emerald-50/40",
+      iconColorClass: "text-emerald-600",
+    },
+    {
+      key: "data",
+      label: t("settings.tabs.data"),
+      icon: Database,
+      colorClass: "text-emerald-700",
+      bgColorClass: "bg-emerald-50/80",
+      hoverColorClass: "hover:bg-emerald-50/40",
+      iconColorClass: "text-emerald-600",
+    },
     ...(isOwner
       ? [
           {
@@ -111,24 +129,6 @@ export const SettingsPane = ({
           },
         ]
       : []),
-    {
-      key: "data",
-      label: t("settings.tabs.data"),
-      icon: Database,
-      colorClass: "text-emerald-700",
-      bgColorClass: "bg-emerald-50/80",
-      hoverColorClass: "hover:bg-emerald-50/40",
-      iconColorClass: "text-emerald-600",
-    },
-    {
-      key: "ai",
-      label: t("settings.tabs.ai"),
-      icon: Sparkles,
-      colorClass: "text-emerald-700",
-      bgColorClass: "bg-emerald-50/80",
-      hoverColorClass: "hover:bg-emerald-50/40",
-      iconColorClass: "text-emerald-600",
-    },
     {
       key: "account",
       label: t("settings.tabs.account"),

apps/web/src/components/settings/PreferenceCard.tsx

@@ -84,40 +84,6 @@ export const PreferenceCard = ({
           </div>
         </div>
 
-        <div className="flex min-h-16 flex-col items-start gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
-          <div className="flex min-w-0 items-start gap-3">
-            <RefreshCw className="mt-0.5 h-4 w-4 shrink-0 text-emerald-700" />
-            <div className="min-w-0">
-              <div className="text-sm font-semibold text-slate-900">{t("settings.autoSaveIntervalTitle")}</div>
-              <div className="mt-0.5 text-xs leading-4 text-slate-500">{t("settings.autoSaveIntervalDescription")}</div>
-            </div>
-          </div>
-          <div className="w-full shrink-0 sm:w-44">
-            <Select
-              value={autoSaveIntervalPreference}
-              onValueChange={(value) => {
-                const preference = value as AutoSaveIntervalPreference;
-                writeAutoSaveIntervalPreference(preference);
-                onAutoSaveIntervalChange(
-                  preference === "5m" ? 300_000 : preference === "15m" ? 900_000 : preference === "30m" ? 1_800_000 : preference === "1h" ? 3_600_000 : preference === "2h" ? 7_200_000 : 60_000
-                );
-              }}
-            >
-              <SelectTrigger aria-label={t("settings.autoSaveIntervalTitle")} className="h-9 bg-white">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="1m">{t("settings.autoSaveIntervals.1m")}</SelectItem>
-                <SelectItem value="5m">{t("settings.autoSaveIntervals.5m")}</SelectItem>
-                <SelectItem value="15m">{t("settings.autoSaveIntervals.15m")}</SelectItem>
-                <SelectItem value="30m">{t("settings.autoSaveIntervals.30m")}</SelectItem>
-                <SelectItem value="1h">{t("settings.autoSaveIntervals.1h")}</SelectItem>
-                <SelectItem value="2h">{t("settings.autoSaveIntervals.2h")}</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-
         <div className="flex min-h-16 flex-col items-start gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
           <div className="flex min-w-0 items-start gap-3">
             <Palette className="mt-0.5 h-4 w-4 shrink-0 text-emerald-700" />
@@ -169,6 +135,40 @@ export const PreferenceCard = ({
           </div>
         </div>
 
+        <div className="flex min-h-16 flex-col items-start gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+          <div className="flex min-w-0 items-start gap-3">
+            <RefreshCw className="mt-0.5 h-4 w-4 shrink-0 text-emerald-700" />
+            <div className="min-w-0">
+              <div className="text-sm font-semibold text-slate-900">{t("settings.autoSaveIntervalTitle")}</div>
+              <div className="mt-0.5 text-xs leading-4 text-slate-500">{t("settings.autoSaveIntervalDescription")}</div>
+            </div>
+          </div>
+          <div className="w-full shrink-0 sm:w-44">
+            <Select
+              value={autoSaveIntervalPreference}
+              onValueChange={(value) => {
+                const preference = value as AutoSaveIntervalPreference;
+                writeAutoSaveIntervalPreference(preference);
+                onAutoSaveIntervalChange(
+                  preference === "5m" ? 300_000 : preference === "15m" ? 900_000 : preference === "30m" ? 1_800_000 : preference === "1h" ? 3_600_000 : preference === "2h" ? 7_200_000 : 60_000
+                );
+              }}
+            >
+              <SelectTrigger aria-label={t("settings.autoSaveIntervalTitle")} className="h-9 bg-white">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="1m">{t("settings.autoSaveIntervals.1m")}</SelectItem>
+                <SelectItem value="5m">{t("settings.autoSaveIntervals.5m")}</SelectItem>
+                <SelectItem value="15m">{t("settings.autoSaveIntervals.15m")}</SelectItem>
+                <SelectItem value="30m">{t("settings.autoSaveIntervals.30m")}</SelectItem>
+                <SelectItem value="1h">{t("settings.autoSaveIntervals.1h")}</SelectItem>
+                <SelectItem value="2h">{t("settings.autoSaveIntervals.2h")}</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
         <div className="flex min-h-16 flex-col items-start gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
           <div className="flex min-w-0 items-start gap-3">
             <Image className="mt-0.5 h-4 w-4 shrink-0 text-emerald-700" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "edgeever",
-  "version": "1.6.21",
+  "version": "1.6.22",
   "private": true,
   "type": "module",
   "workspaces": [