refactor(settings): split Data accordion into Import/Export and Cloud Sync

src/components/settings/SettingsPage.tsx

@@ -5,6 +5,7 @@ import {
   Save,
   FolderSearch,
   Database,
+  Cloud,
   ScrollText,
 } from "lucide-react";
 import { toast } from "sonner";
@@ -323,9 +324,28 @@ export function SettingsPage({
                             onExport={exportConfig}
                             onClear={clearSelection}
                           />
-                          <div className="pt-6">
-                            <WebdavSyncSection config={settings?.webdavSync} />
+                        </AccordionContent>
+                      </AccordionItem>
+
+                      <AccordionItem
+                        value="cloudSync"
+                        className="rounded-xl glass-card overflow-hidden"
+                      >
+                        <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">
+                            <Cloud className="h-5 w-5 text-blue-500" />
+                            <div className="text-left">
+                              <h3 className="text-base font-semibold">
+                                {t("settings.advanced.cloudSync.title")}
+                              </h3>
+                              <p className="text-sm text-muted-foreground font-normal">
+                                {t("settings.advanced.cloudSync.description")}
+                              </p>
+                            </div>
                           </div>
+                        </AccordionTrigger>
+                        <AccordionContent className="px-6 pb-6 pt-4 border-t border-border/50">
+                          <WebdavSyncSection config={settings?.webdavSync} />
                         </AccordionContent>
                       </AccordionItem>