From 07545bd15ab541711415aabb55778d81fe408e45 Mon Sep 17 00:00:00 2001
From: lucletoffe <15689941+lucletoffe@users.noreply.github.com>
Date: Mon, 17 Aug 2026 15:50:09 +0200
Subject: [PATCH] fix(settings): give the Layout tab its own title instead of
 Appearance's
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Settings → Layout renders the header "Appearance / Customize the look and
feel of your webmail" — byte for byte what Settings → Appearance renders.
`LayoutSettings` reads every string from the `settings.appearance` namespace,
including the section title, so the two tabs are indistinguishable once open.

Concretely: a user looking for "Unified Mailbox / All mail" lands on
Appearance, reads a page titled "Appearance", finds theme, density and
avatar toggles, and concludes the setting does not exist — while it sits one
tab below under an identical heading.

Only the section header moves to a new `settings.layout` namespace; the items
keep their `settings.appearance` keys, so no existing translation is
invalidated. Locales without `settings.layout` fall back to English through
`mergeMessages`, so nothing renders a raw key.
---
 components/settings/layout-settings.tsx | 7 ++++++-
 locales/en/common.json                  | 4 ++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/components/settings/layout-settings.tsx b/components/settings/layout-settings.tsx
index 505b3e49f..0ec6a611b 100644
--- a/components/settings/layout-settings.tsx
+++ b/components/settings/layout-settings.tsx
@@ -116,7 +116,12 @@ function MailLayoutPreview({
 }
 
 export function LayoutSettings() {
+  // Every item on this page is keyed under `settings.appearance` for historical
+  // reasons, so `t` stays on that namespace. Only the section header moves to
+  // `settings.layout` — otherwise this tab renders the exact same title and
+  // description as the Appearance tab and the two become indistinguishable.
   const t = useTranslations('settings.appearance');
+  const tLayout = useTranslations('settings.layout');
   const tEmail = useTranslations('settings.email_behavior');
   const { toolbarPosition, showToolbarLabels, hideAccountSwitcher, showRailAccountList, enableUnifiedMailbox, includeGroupInUnified, unifiedCrossAccount, allMailFolderIds, enableCrossUnreadView, enableCrossStarredView, enableCrossAllView, colorfulSidebarIcons, tintListRowsByTag, showFolderTotalCount, faviconUnreadBadge, mailLayout, proInterface, updateSetting } = useSettingsStore();
   const { isSettingLocked, isSettingHidden, isFeatureEnabled } = usePolicyStore();
@@ -167,7 +172,7 @@ export function LayoutSettings() {
     : null;
 
   return (
-    <SettingsSection title={t('title')} description={t('description')}>
+    <SettingsSection title={tLayout('title')} description={tLayout('description')}>
       {!isSettingHidden('mailLayout') && (
       <SettingItem label={tEmail('mail_layout.label')} description={tEmail('mail_layout.description')} locked={isSettingLocked('mailLayout')}>
         <div className="w-[22rem] max-w-full">
diff --git a/locales/en/common.json b/locales/en/common.json
index 9280dc65f..6b4c8a47b 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -1022,6 +1022,10 @@
         "description": "Show an All mail entry in the Unified Mailbox listing all mail across the selected folders."
       }
     },
+    "layout": {
+      "title": "Layout",
+      "description": "Arrange the reading pane, toolbar, sidebar and unified mailbox"
+    },
     "keywords": {
       "title": "Email Tags",
       "description": "Define tags to organize your emails. These are stored as JMAP keywords on the server.",