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

@@ -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' && (

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.',

src/i18n/catalogs/fa.ts

@@ -580,6 +580,8 @@ const fa = {
     },
     lookAndFeel: {
       language: 'زبان',
+      languageAndRegion: 'زبان و منطقه',
+      layout: 'چیدمان',
       languageDescription: 'زبان رابط Firelink را انتخاب کنید.',
       sidebarPosition: 'جایگاه نوار کناری',
       sidebarPositionDescription: 'مشخص کنید نوار کناری کجا نمایش داده شود. حالت خودکار از جهت رابط کاربری پیروی می‌کند.',

src/i18n/catalogs/he.ts

@@ -580,6 +580,8 @@ const he = {
     },
     lookAndFeel: {
       language: 'שפה',
+      languageAndRegion: 'שפה ואזור',
+      layout: 'פריסה',
       languageDescription: 'בחר את שפת הממשק של Firelink.',
       sidebarPosition: 'מיקום סרגל הצד',
       sidebarPositionDescription: 'בחר היכן יופיע סרגל הצד. מצב אוטומטי עוקב אחר כיוון הממשק.',

src/i18n/catalogs/ru.ts

@@ -580,6 +580,8 @@ const ru = {
     },
     lookAndFeel: {
       language: 'Язык',
+      languageAndRegion: 'Язык и регион',
+      layout: 'Компоновка',
       languageDescription: 'Выберите язык интерфейса Firelink.',
       sidebarPosition: 'Положение боковой панели',
       sidebarPositionDescription: 'Выберите, где отображается боковая панель. В автоматическом режиме следует направлению интерфейса.',

src/i18n/catalogs/uk.ts

@@ -580,6 +580,8 @@ const uk = {
     },
     lookAndFeel: {
       language: 'Мова',
+      languageAndRegion: 'Мова й регіон',
+      layout: 'Компонування',
       languageDescription: 'Виберіть мову інтерфейсу Firelink.',
       sidebarPosition: 'Положення бічної панелі',
       sidebarPositionDescription: 'Виберіть, де відображати бічну панель. Автоматичний режим враховує напрямок інтерфейсу.',

src/i18n/catalogs/zh-CN.ts

@@ -580,6 +580,8 @@ const zhCN = {
     },
     lookAndFeel: {
       language: '语言',
+      languageAndRegion: '语言和地区',
+      layout: '布局',
       languageDescription: '选择 Firelink 的界面语言。',
       sidebarPosition: '侧边栏位置',
       sidebarPositionDescription: '选择侧边栏显示的位置。“自动”会跟随界面文字方向。',