From f5aa3385563235c2b6bfaf7fe5a59ef71e800702 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Mon, 19 Oct 2026 18:19:28 +0200
Subject: [PATCH] refactor: give every settings page section an anchor for the
 jump row and links

---
 components/settings/address-book-management-settings.tsx | 4 ++--
 components/settings/calendar-management-settings.tsx     | 2 +-
 components/settings/calendar-settings.tsx                | 2 +-
 components/settings/contacts-settings.tsx                | 1 +
 components/settings/files-settings.tsx                   | 8 ++++----
 components/settings/filter-settings.tsx                  | 2 +-
 components/settings/multi-account-push.tsx               | 2 +-
 components/settings/vacation-settings.tsx                | 4 ++--
 8 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/components/settings/address-book-management-settings.tsx b/components/settings/address-book-management-settings.tsx
index 7f584e1af..34aa1b683 100644
--- a/components/settings/address-book-management-settings.tsx
+++ b/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) {
diff --git a/components/settings/calendar-management-settings.tsx b/components/settings/calendar-management-settings.tsx
index 5ae1ccaac..9624b8792 100644
--- a/components/settings/calendar-management-settings.tsx
+++ b/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';
diff --git a/components/settings/calendar-settings.tsx b/components/settings/calendar-settings.tsx
index 5e7f8e655..99b75d686 100644
--- a/components/settings/calendar-settings.tsx
+++ b/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}
diff --git a/components/settings/contacts-settings.tsx b/components/settings/contacts-settings.tsx
index 3fca3967a..a2cd791e7 100644
--- a/components/settings/contacts-settings.tsx
+++ b/components/settings/contacts-settings.tsx
@@ -56,6 +56,7 @@ export function ContactsSettings() {
 
   return (
     <SettingsSection
+      id="contacts"
       title={tSettings("title")}
       description={tSettings("description")}
     >
diff --git a/components/settings/files-settings.tsx b/components/settings/files-settings.tsx
index 762c7792b..b93d340d3 100644
--- a/components/settings/files-settings.tsx
+++ b/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 })}
diff --git a/components/settings/filter-settings.tsx b/components/settings/filter-settings.tsx
index 046f65936..0be9c38d0 100644
--- a/components/settings/filter-settings.tsx
+++ b/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" />
diff --git a/components/settings/multi-account-push.tsx b/components/settings/multi-account-push.tsx
index 0110fe2cb..532313745 100644
--- a/components/settings/multi-account-push.tsx
+++ b/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}
diff --git a/components/settings/vacation-settings.tsx b/components/settings/vacation-settings.tsx
index 8087f6f4e..33900bc5b 100644
--- a/components/settings/vacation-settings.tsx
+++ b/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}