Simplify settings preferences layout

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, and made service deletion warn before cascading linked-user removal.
+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.

src/SystemTab.tsx

@@ -73,11 +73,10 @@ export default function SystemTab({
         <section className="page-grid single-column system-grid">
           <article className="panel-card">
             <div className="card-header">
-              <h2>{text.common.panelPreferences}</h2>
+              <h2>{text.settings.title}</h2>
-            </div>
+              <div className="settings-toolbar">
-            <div className="system-fields">
+                <label className="field-group compact-field">
-              <label className="field-group">
+                  <span>{text.common.language}</span>
-                {text.common.language}
                   <select
                     value={preferences.language}
                     onChange={(event) =>
@@ -91,8 +90,8 @@ export default function SystemTab({
                     <option value="ru">{text.common.russian}</option>
                   </select>
                 </label>
-              <label className="field-group">
+                <label className="field-group compact-field">
-                {text.common.theme}
+                  <span>{text.common.theme}</span>
                   <select
                     value={preferences.theme}
                     onChange={(event) =>
@@ -107,12 +106,6 @@ export default function SystemTab({
                     <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"
@@ -126,6 +119,7 @@ export default function SystemTab({
                   {text.common.addService}
                 </button>
               </div>
+            </div>
             <div className="service-editor-list">
               {draft.services.map((service, index) => (
                 <section key={service.id} className="service-editor-row">

src/app.css

@@ -450,6 +450,23 @@ 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;
 }
@@ -563,10 +580,6 @@ tbody tr:last-child td {
   display: block;
 }
 
-.system-settings-card {
-  gap: 12px;
-}
-
 .system-fields,
 .service-editor-grid {
   display: grid;
@@ -694,7 +707,8 @@ pre {
   }
 
   .shell-header,
-  .table-toolbar {
+  .table-toolbar,
+  .settings-toolbar {
     flex-direction: column;
     align-items: flex-start;
   }

src/lib/panelPreferences.ts

@@ -6,11 +6,11 @@ export interface PanelPreferences {
   theme: PanelTheme;
 }
 
-const PREFERENCES_KEY = '3proxy-ui-panel-preferences';
+const PREFERENCES_KEY = '3proxy-ui-panel-preferences-v2';
 
 export const defaultPanelPreferences: PanelPreferences = {
   language: 'en',
-  theme: 'system',
+  theme: 'light',
 };
 
 export function loadPanelPreferences(): PanelPreferences {