refactor: give every settings page section an anchor for the jump row and links

components/settings/address-book-management-settings.tsx

@@ -249,7 +249,7 @@ export function AddressBookManagementSettings() {
 
   return (
     <>
-    <SettingsSection title={tSettings("manage_title")} description={tSettings("manage_description")}>
+    <SettingsSection id="address-books" title={tSettings("manage_title")} description={tSettings("manage_description")}>
       <div className="space-y-2">
         {/* In scoped mode (managing a shared account) hide the user's own
             address books and show only the managed account's group. */}
@@ -290,7 +290,7 @@ export function AddressBookManagementSettings() {
         shared account, so hide them while scoped to a shared account. */}
     {!managedAccountId && (
     <div className="mt-8">
-      <SettingsSection title={tSettings("categories_title")} description={tSettings("categories_description")}>
+      <SettingsSection id="categories" title={tSettings("categories_title")} description={tSettings("categories_description")}>
         <div className="space-y-2">
           {sortedKeywords.map(([keyword, count]) => {
             if (editingKeyword === keyword) {

components/settings/calendar-management-settings.tsx

@@ -531,7 +531,7 @@ export function CalendarManagementSettings() {
   };
 
   return (
-    <SettingsSection title={t('title')} description={t('description')}>
+    <SettingsSection id="calendars" title={t('title')} description={t('description')}>
       <div className="space-y-2">
         {listedCalendars.map((cal) => {
           const color = (cal.isShared && sharedCalendarColors[sharedCalendarColorKey(cal)]) || cal.color || '#3b82f6';

components/settings/calendar-settings.tsx

@@ -80,7 +80,7 @@ export function CalendarSettings() {
   };
 
   return (
-    <SettingsSection title={t('title')}>
+    <SettingsSection id="calendar" title={t('title')}>
       <SettingItem label={t('default_view')}>
         <Select
           value={viewMode}

components/settings/contacts-settings.tsx

@@ -56,6 +56,7 @@ export function ContactsSettings() {
 
   return (
     <SettingsSection
+      id="contacts"
       title={tSettings("title")}
       description={tSettings("description")}
     >

components/settings/files-settings.tsx

@@ -185,7 +185,7 @@ export function FilesSettingsComponent() {
       </div>
 
       <div className="space-y-8">
-        <SettingsSection title={t("display.title")} description={t("display.description")}>
+        <SettingsSection id="display" title={t("display.title")} description={t("display.description")}>
         <SettingItem label={t("default_view.label")} description={t("default_view.description")}>
           <RadioGroup
             value={settings.defaultViewMode}
@@ -219,7 +219,7 @@ export function FilesSettingsComponent() {
         </SettingItem>
       </SettingsSection>
 
-      <SettingsSection title={t("icons.title")} description={t("icons.description")}>
+      <SettingsSection id="icons" title={t("icons.title")} description={t("icons.description")}>
         <SettingItem label={t("show_icons.label")} description={t("show_icons.description")}>
           <ToggleSwitch
             checked={settings.showIcons}
@@ -241,8 +241,8 @@ export function FilesSettingsComponent() {
         </SettingItem>
       </SettingsSection>
 
-      <SettingsSection title={t("behavior.title")} description={t("behavior.description")}>
-        <SettingItem label={t("show_hidden.label")} description={t("show_hidden.description")}>
+      <SettingsSection id="behavior" advanced title={t("behavior.title")} description={t("behavior.description")}>
+        <SettingItem advanced label={t("show_hidden.label")} description={t("show_hidden.description")}>
           <ToggleSwitch
             checked={settings.showHiddenFiles}
             onChange={(v) => update({ showHiddenFiles: v })}

components/settings/filter-settings.tsx

@@ -505,7 +505,7 @@ export function FilterSettings() {
 
   return (
     <div className="space-y-6">
-      <SettingsSection title={t("title")} description={t("description")}>
+      <SettingsSection id="rules" title={t("title")} description={t("description")}>
         {isOpaque && (
           <div className="flex items-start gap-2 p-3 rounded-md bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 text-sm text-amber-700 dark:text-amber-400">
             <AlertTriangle className="w-4 h-4 mt-0.5 flex-shrink-0" />

components/settings/multi-account-push.tsx

@@ -110,7 +110,7 @@ export function MultiAccountPushSettings({ relayBaseUrl }: { relayBaseUrl?: stri
 
   const allChosen = connected.length > 0 && connected.every(a => chosen.has(a.id));
 
-  return <SettingsSection title={t('title')} description={t('description')}>
+  return <SettingsSection id="push-all" title={t('title')} description={t('description')}>
     <div className="space-y-3">
       <label className="flex items-center gap-2 text-sm font-medium">
         <input type="checkbox" disabled={busy} checked={allChosen}

components/settings/vacation-settings.tsx

@@ -388,7 +388,7 @@ export function VacationSettings() {
         </SettingItem>
       </SettingsSection>
 
-      <SettingsSection title={t('auto_reply.title')} description={t('status.description')}>
+      <SettingsSection id="reply" title={t('auto_reply.title')} description={t('status.description')}>
         <SettingItem label={t('status.label')}>
           <StatusSwitch
             checked={localEnabled}
@@ -503,7 +503,7 @@ export function VacationSettings() {
       })()}
 
       {forwardAvailable && (
-        <SettingsSection title={t('forward.title')} description={t('forward.description')}>
+        <SettingsSection id="forward" title={t('forward.title')} description={t('forward.description')}>
           <SettingItem label={t('forward.enabled_label')}>
             <StatusSwitch
               checked={forwardEnabled}