rednakse/3proxyUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "Simplify settings preferences layout"

Browse Source 
This reverts commit b3b097d265.
This commit is contained in:
rednakse
2026-04-02 01:08:45 +03:00
parent b3b097d265
commit 02d1d0dc4b
4 changed files with 58 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/PLAN.md
View File

@@ -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. 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. 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. 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.

94
src/SystemTab.tsx
View File

@@ -73,52 +73,58 @@ export default function SystemTab({
<section className="page-grid single-column system-grid"> <section className="page-grid single-column system-grid">
<article className="panel-card"> <article className="panel-card">
<div className="card-header"> <div className="card-header">
<h2>{text.settings.title}</h2> <h2>{text.common.panelPreferences}</h2>
<div className="settings-toolbar"> </div>
<label className="field-group compact-field"> <div className="system-fields">
<span>{text.common.language}</span> <label className="field-group">
<select {text.common.language}
value={preferences.language} <select
onChange={(event) => value={preferences.language}
onPreferencesChange({ onChange={(event) =>
...preferences, onPreferencesChange({
language: event.target.value as PanelLanguage, ...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)],
}))
} }
> >
{text.common.addService} <option value="en">{text.common.english}</option>
</button> <option value="ru">{text.common.russian}</option>
</div> </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>
<div className="service-editor-list"> <div className="service-editor-list">
{draft.services.map((service, index) => ( {draft.services.map((service, index) => (

24
src/app.css
View File

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

4
src/lib/panelPreferences.ts
View File

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