From 02d1d0dc4b07cfeb78aa0bb7197102ff75eec704 Mon Sep 17 00:00:00 2001
From: rednakse <box@rednakse.ru>
Date: Thu, 2 Apr 2026 01:08:45 +0300
Subject: [PATCH] Revert "Simplify settings preferences layout"

This reverts commit b3b097d26553bc7866c4eb0776929275b7e8da5b.
---
 docs/PLAN.md                |  2 +-
 src/SystemTab.tsx           | 94 ++++++++++++++++++++-----------------
 src/app.css                 | 24 ++--------
 src/lib/panelPreferences.ts |  4 +-
 4 files changed, 58 insertions(+), 66 deletions(-)

diff --git a/docs/PLAN.md b/docs/PLAN.md
index d3decd7..d24da5a 100644
--- a/docs/PLAN.md
+++ b/docs/PLAN.md
@@ -31,4 +31,4 @@ Updated: 2026-04-02
 15. Added editable System settings with shared validation, a system update API, service/port conflict protection, and UI coverage for local save flows.
 16. Simplified the System tab layout by removing the redundant Runtime card and collapsing those fields into a compact settings section.
 17. Moved panel auth to server-issued expiring tokens with `sessionStorage` persistence and Compose-configurable credentials/TTL.
-18. Reworked Settings to store panel language/theme in `localStorage`, added RU/EN UI switching, made service deletion warn before cascading linked-user removal, and then simplified the preferences UI back into a compact inline strip with a light default theme.
+18. Reworked Settings to store panel language/theme in `localStorage`, added RU/EN UI switching, and made service deletion warn before cascading linked-user removal.
diff --git a/src/SystemTab.tsx b/src/SystemTab.tsx
index 14daa84..e68064a 100644
--- a/src/SystemTab.tsx
+++ b/src/SystemTab.tsx
@@ -73,52 +73,58 @@ export default function SystemTab({
         <section className="page-grid single-column system-grid">
           <article className="panel-card">
             <div className="card-header">
-              <h2>{text.settings.title}</h2>
-              <div className="settings-toolbar">
-                <label className="field-group compact-field">
-                  <span>{text.common.language}</span>
-                  <select
-                    value={preferences.language}
-                    onChange={(event) =>
-                      onPreferencesChange({
-                        ...preferences,
-                        language: event.target.value as PanelLanguage,
-                      })
-                    }
-                  >
-                    <option value="en">{text.common.english}</option>
-                    <option value="ru">{text.common.russian}</option>
-                  </select>
-                </label>
-                <label className="field-group compact-field">
-                  <span>{text.common.theme}</span>
-                  <select
-                    value={preferences.theme}
-                    onChange={(event) =>
-                      onPreferencesChange({
-                        ...preferences,
-                        theme: event.target.value as PanelTheme,
-                      })
-                    }
-                  >
-                    <option value="light">{getThemeLabel(preferences.language, 'light')}</option>
-                    <option value="dark">{getThemeLabel(preferences.language, 'dark')}</option>
-                    <option value="system">{getThemeLabel(preferences.language, 'system')}</option>
-                  </select>
-                </label>
-                <button
-                  type="button"
-                  className="button-secondary"
-                  onClick={() =>
-                    setDraft((current) => ({
-                      ...current,
-                      services: [...current.services, createServiceDraft(current.services)],
-                    }))
+              <h2>{text.common.panelPreferences}</h2>
+            </div>
+            <div className="system-fields">
+              <label className="field-group">
+                {text.common.language}
+                <select
+                  value={preferences.language}
+                  onChange={(event) =>
+                    onPreferencesChange({
+                      ...preferences,
+                      language: event.target.value as PanelLanguage,
+                    })
                   }
                 >
-                  {text.common.addService}
-                </button>
-              </div>
+                  <option value="en">{text.common.english}</option>
+                  <option value="ru">{text.common.russian}</option>
+                </select>
+              </label>
+              <label className="field-group">
+                {text.common.theme}
+                <select
+                  value={preferences.theme}
+                  onChange={(event) =>
+                    onPreferencesChange({
+                      ...preferences,
+                      theme: event.target.value as PanelTheme,
+                    })
+                  }
+                >
+                  <option value="light">{getThemeLabel(preferences.language, 'light')}</option>
+                  <option value="dark">{getThemeLabel(preferences.language, 'dark')}</option>
+                  <option value="system">{getThemeLabel(preferences.language, 'system')}</option>
+                </select>
+              </label>
+            </div>
+          </article>
+
+          <article className="panel-card">
+            <div className="card-header">
+              <h2>{text.settings.title}</h2>
+              <button
+                type="button"
+                className="button-secondary"
+                onClick={() =>
+                  setDraft((current) => ({
+                    ...current,
+                    services: [...current.services, createServiceDraft(current.services)],
+                  }))
+                }
+              >
+                {text.common.addService}
+              </button>
             </div>
             <div className="service-editor-list">
               {draft.services.map((service, index) => (
diff --git a/src/app.css b/src/app.css
index 849e76d..37b6a0a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -450,23 +450,6 @@ button,
   color: var(--muted);
 }
 
-.settings-toolbar {
-  display: flex;
-  align-items: end;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.compact-field {
-  min-width: 220px;
-  flex: 0 1 240px;
-}
-
-.compact-field span {
-  color: var(--muted);
-  font-size: 12px;
-}
-
 .toolbar-actions {
   flex-wrap: wrap;
 }
@@ -580,6 +563,10 @@ tbody tr:last-child td {
   display: block;
 }
 
+.system-settings-card {
+  gap: 12px;
+}
+
 .system-fields,
 .service-editor-grid {
   display: grid;
@@ -707,8 +694,7 @@ pre {
   }
 
   .shell-header,
-  .table-toolbar,
-  .settings-toolbar {
+  .table-toolbar {
     flex-direction: column;
     align-items: flex-start;
   }
diff --git a/src/lib/panelPreferences.ts b/src/lib/panelPreferences.ts
index 35f530a..2b4e6f5 100644
--- a/src/lib/panelPreferences.ts
+++ b/src/lib/panelPreferences.ts
@@ -6,11 +6,11 @@ export interface PanelPreferences {
   theme: PanelTheme;
 }
 
-const PREFERENCES_KEY = '3proxy-ui-panel-preferences-v2';
+const PREFERENCES_KEY = '3proxy-ui-panel-preferences';
 
 export const defaultPanelPreferences: PanelPreferences = {
   language: 'en',
-  theme: 'light',
+  theme: 'system',
 };
 
 export function loadPanelPreferences(): PanelPreferences {