From 228db1eaa21a8d69e06ea80a1d2d3f2c174aa5cc Mon Sep 17 00:00:00 2001
From: NimBold <NimBold@users.noreply.github.com>
Date: Thu, 23 Jul 2026 16:54:53 +0330
Subject: [PATCH] fix(settings): improve look and feel organization

Prevent localized select labels from being clipped and order appearance settings by scope and frequency.

Refs #31
---
 src/components/SettingsView.tsx | 140 ++++++++++++++++----------------
 src/i18n/catalogs/en.ts         |   2 +
 src/i18n/catalogs/fa.ts         |   2 +
 src/i18n/catalogs/he.ts         |   2 +
 src/i18n/catalogs/ru.ts         |   2 +
 src/i18n/catalogs/uk.ts         |   2 +
 src/i18n/catalogs/zh-CN.ts      |   2 +
 7 files changed, 84 insertions(+), 68 deletions(-)

diff --git a/src/components/SettingsView.tsx b/src/components/SettingsView.tsx
index ce719bb..7267d76 100644
--- a/src/components/SettingsView.tsx
+++ b/src/components/SettingsView.tsx
@@ -866,74 +866,6 @@ runEngineChecks(false);
           {/* Look & Feel Pane */}
           {activeTab === 'lookandfeel' && (
             <div className="settings-pane max-w-[720px]">
-              <h2 className="settings-section-title">{t($ => $.settings.lookAndFeel.language)}</h2>
-              <div className="mac-settings-group">
-                <div className="mac-settings-row">
-                  <div className="settings-row-label">
-                    <span>{t($ => $.settings.lookAndFeel.language)}</span>
-                    <small>{t($ => $.settings.lookAndFeel.languageDescription)}</small>
-                  </div>
-                  <select
-                    value={settings.language}
-                    onChange={(event) => settings.setLanguage(event.target.value as typeof settings.language)}
-                    className="app-control w-48"
-                  >
-                    {languageOptions.map(option => (
-                      <option key={option.value} value={option.value}>{option.label}</option>
-                    ))}
-                  </select>
-                </div>
-                <div className="mac-settings-row">
-                  <div className="settings-row-label">
-                    <span>{t($ => $.settings.lookAndFeel.calendar)}</span>
-                    <small>{t($ => $.settings.lookAndFeel.calendarDescription)}</small>
-                  </div>
-                  <select
-                    value={settings.calendarPreference}
-                    onChange={(event) => settings.setCalendarPreference(event.target.value as typeof settings.calendarPreference)}
-                    className="app-control w-48"
-                  >
-                    {calendarOptions.map(option => (
-                      <option key={option.value} value={option.value}>{option.label}</option>
-                    ))}
-                  </select>
-                </div>
-                <div className="mac-settings-row">
-                  <div className="settings-row-label">
-                    <span>{t($ => $.settings.lookAndFeel.sidebarPosition)}</span>
-                    <small>{t($ => $.settings.lookAndFeel.sidebarPositionDescription)}</small>
-                  </div>
-                  <select
-                    value={settings.sidebarPosition}
-                    onChange={(event) => settings.setSidebarPosition(event.target.value as SidebarPosition)}
-                    className="app-control w-48"
-                  >
-                    <option value="auto">{t($ => $.settings.lookAndFeel.sidebarPositionAutomatic)}</option>
-                    <option value="left">{t($ => $.settings.lookAndFeel.sidebarPositionLeft)}</option>
-                    <option value="right">{t($ => $.settings.lookAndFeel.sidebarPositionRight)}</option>
-                  </select>
-                </div>
-              </div>
-
-              <h2 className="settings-section-title">{t($ => $.settings.lookAndFeel.windowControls)}</h2>
-              <div className="mac-settings-group">
-                <div className="mac-settings-row">
-                  <div className="settings-row-label">
-                    <span>{t($ => $.settings.lookAndFeel.windowControlStyle)}</span>
-                    <small>{t($ => $.settings.lookAndFeel.windowControlsDescription)}</small>
-                  </div>
-                  <select
-                    value={settings.windowControlStyle}
-                    onChange={(event) => settings.setWindowControlStyle(event.target.value as WindowControlStyle)}
-                    className="app-control w-48"
-                  >
-                    {windowControlStyleOptions.map(option => (
-                      <option key={option.value} value={option.value}>{option.label}</option>
-                    ))}
-                  </select>
-                </div>
-              </div>
-
               <h2 className="settings-section-title">{t($ => $.settings.lookAndFeel.appTheme)}</h2>
               <div className="mac-settings-group">
                 <div className="mac-settings-row settings-choice-row">
@@ -1003,6 +935,78 @@ runEngineChecks(false);
                 </div>
               </div>
 
+              <h2 className="settings-section-title">{t($ => $.settings.lookAndFeel.languageAndRegion)}</h2>
+              <div className="mac-settings-group">
+                <div className="mac-settings-row">
+                  <div className="settings-row-label">
+                    <span>{t($ => $.settings.lookAndFeel.language)}</span>
+                    <small>{t($ => $.settings.lookAndFeel.languageDescription)}</small>
+                  </div>
+                  <select
+                    value={settings.language}
+                    onChange={(event) => settings.setLanguage(event.target.value as typeof settings.language)}
+                    className="app-control w-60"
+                  >
+                    {languageOptions.map(option => (
+                      <option key={option.value} value={option.value}>{option.label}</option>
+                    ))}
+                  </select>
+                </div>
+                <div className="mac-settings-row">
+                  <div className="settings-row-label">
+                    <span>{t($ => $.settings.lookAndFeel.calendar)}</span>
+                    <small>{t($ => $.settings.lookAndFeel.calendarDescription)}</small>
+                  </div>
+                  <select
+                    value={settings.calendarPreference}
+                    onChange={(event) => settings.setCalendarPreference(event.target.value as typeof settings.calendarPreference)}
+                    className="app-control w-60"
+                  >
+                    {calendarOptions.map(option => (
+                      <option key={option.value} value={option.value}>{option.label}</option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+
+              <h2 className="settings-section-title">{t($ => $.settings.lookAndFeel.windowControls)}</h2>
+              <div className="mac-settings-group">
+                <div className="mac-settings-row">
+                  <div className="settings-row-label">
+                    <span>{t($ => $.settings.lookAndFeel.windowControlStyle)}</span>
+                    <small>{t($ => $.settings.lookAndFeel.windowControlsDescription)}</small>
+                  </div>
+                  <select
+                    value={settings.windowControlStyle}
+                    onChange={(event) => settings.setWindowControlStyle(event.target.value as WindowControlStyle)}
+                    className="app-control w-60"
+                  >
+                    {windowControlStyleOptions.map(option => (
+                      <option key={option.value} value={option.value}>{option.label}</option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+
+              <h2 className="settings-section-title">{t($ => $.settings.lookAndFeel.layout)}</h2>
+              <div className="mac-settings-group">
+                <div className="mac-settings-row">
+                  <div className="settings-row-label">
+                    <span>{t($ => $.settings.lookAndFeel.sidebarPosition)}</span>
+                    <small>{t($ => $.settings.lookAndFeel.sidebarPositionDescription)}</small>
+                  </div>
+                  <select
+                    value={settings.sidebarPosition}
+                    onChange={(event) => settings.setSidebarPosition(event.target.value as SidebarPosition)}
+                    className="app-control w-60"
+                  >
+                    <option value="auto">{t($ => $.settings.lookAndFeel.sidebarPositionAutomatic)}</option>
+                    <option value="left">{t($ => $.settings.lookAndFeel.sidebarPositionLeft)}</option>
+                    <option value="right">{t($ => $.settings.lookAndFeel.sidebarPositionRight)}</option>
+                  </select>
+                </div>
+              </div>
+
               <h2 className="settings-section-title">{t($ => $.settings.lookAndFeel.osIntegration)}</h2>
               <div className="mac-settings-group">
                 {platform.os === 'macos' && (
diff --git a/src/i18n/catalogs/en.ts b/src/i18n/catalogs/en.ts
index 1458e50..212ff1b 100644
--- a/src/i18n/catalogs/en.ts
+++ b/src/i18n/catalogs/en.ts
@@ -580,6 +580,8 @@ const common = {
     },
     lookAndFeel: {
       language: 'Language',
+      languageAndRegion: 'Language & region',
+      layout: 'Layout',
       languageDescription: 'Choose the Firelink interface language.',
       sidebarPosition: 'Sidebar position',
       sidebarPositionDescription: 'Choose where the sidebar appears. Automatic follows the interface direction.',
diff --git a/src/i18n/catalogs/fa.ts b/src/i18n/catalogs/fa.ts
index 020d7c0..ab52814 100644
--- a/src/i18n/catalogs/fa.ts
+++ b/src/i18n/catalogs/fa.ts
@@ -580,6 +580,8 @@ const fa = {
     },
     lookAndFeel: {
       language: 'زبان',
+      languageAndRegion: 'زبان و منطقه',
+      layout: 'چیدمان',
       languageDescription: 'زبان رابط Firelink را انتخاب کنید.',
       sidebarPosition: 'جایگاه نوار کناری',
       sidebarPositionDescription: 'مشخص کنید نوار کناری کجا نمایش داده شود. حالت خودکار از جهت رابط کاربری پیروی می‌کند.',
diff --git a/src/i18n/catalogs/he.ts b/src/i18n/catalogs/he.ts
index a28e0db..15ea875 100644
--- a/src/i18n/catalogs/he.ts
+++ b/src/i18n/catalogs/he.ts
@@ -580,6 +580,8 @@ const he = {
     },
     lookAndFeel: {
       language: 'שפה',
+      languageAndRegion: 'שפה ואזור',
+      layout: 'פריסה',
       languageDescription: 'בחר את שפת הממשק של Firelink.',
       sidebarPosition: 'מיקום סרגל הצד',
       sidebarPositionDescription: 'בחר היכן יופיע סרגל הצד. מצב אוטומטי עוקב אחר כיוון הממשק.',
diff --git a/src/i18n/catalogs/ru.ts b/src/i18n/catalogs/ru.ts
index 96898c8..e358e6c 100644
--- a/src/i18n/catalogs/ru.ts
+++ b/src/i18n/catalogs/ru.ts
@@ -580,6 +580,8 @@ const ru = {
     },
     lookAndFeel: {
       language: 'Язык',
+      languageAndRegion: 'Язык и регион',
+      layout: 'Компоновка',
       languageDescription: 'Выберите язык интерфейса Firelink.',
       sidebarPosition: 'Положение боковой панели',
       sidebarPositionDescription: 'Выберите, где отображается боковая панель. В автоматическом режиме следует направлению интерфейса.',
diff --git a/src/i18n/catalogs/uk.ts b/src/i18n/catalogs/uk.ts
index 1ffbec6..5465aa7 100644
--- a/src/i18n/catalogs/uk.ts
+++ b/src/i18n/catalogs/uk.ts
@@ -580,6 +580,8 @@ const uk = {
     },
     lookAndFeel: {
       language: 'Мова',
+      languageAndRegion: 'Мова й регіон',
+      layout: 'Компонування',
       languageDescription: 'Виберіть мову інтерфейсу Firelink.',
       sidebarPosition: 'Положення бічної панелі',
       sidebarPositionDescription: 'Виберіть, де відображати бічну панель. Автоматичний режим враховує напрямок інтерфейсу.',
diff --git a/src/i18n/catalogs/zh-CN.ts b/src/i18n/catalogs/zh-CN.ts
index 3934ff0..ce38863 100644
--- a/src/i18n/catalogs/zh-CN.ts
+++ b/src/i18n/catalogs/zh-CN.ts
@@ -580,6 +580,8 @@ const zhCN = {
     },
     lookAndFeel: {
       language: '语言',
+      languageAndRegion: '语言和地区',
+      layout: '布局',
       languageDescription: '选择 Firelink 的界面语言。',
       sidebarPosition: '侧边栏位置',
       sidebarPositionDescription: '选择侧边栏显示的位置。“自动”会跟随界面文字方向。',