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

style: simplify panel to minimalist layout

Browse Source
This commit is contained in:
rednakse
2026-04-01 23:12:35 +03:00
parent 0d035f3278
commit f6262fa721
4 changed files with 170 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/PLAN.md
View File

@@ -18,3 +18,4 @@ Updated: 2026-04-01
2. Initialized the repository and established autonomous agent workflow rules. 2. Initialized the repository and established autonomous agent workflow rules.
3. Implemented the first UI slice with hardcoded panel auth, operator-focused dashboard, users table, and system config preview. 3. Implemented the first UI slice with hardcoded panel auth, operator-focused dashboard, users table, and system config preview.
4. Added paranoia-oriented tests for login gating, proxy link encoding, quota edge cases, and traffic share formatting. 4. Added paranoia-oriented tests for login gating, proxy link encoding, quota edge cases, and traffic share formatting.
5. Simplified the UI into a calmer minimalist layout with reduced visual noise and denser operational presentation.

2
src/App.test.tsx
View File

@@ -25,6 +25,6 @@ describe('App login gate', () => {
await user.click(screen.getByRole('button', { name: /open panel/i })); await user.click(screen.getByRole('button', { name: /open panel/i }));
expect(screen.getByRole('navigation', { name: /primary/i })).toBeInTheDocument(); expect(screen.getByRole('navigation', { name: /primary/i })).toBeInTheDocument();
expect(screen.getByText(/operator panel/i)).toBeInTheDocument(); expect(screen.getByText(/control panel/i)).toBeInTheDocument();
}); });
}); });

39
src/App.tsx
View File

@@ -38,12 +38,9 @@ function LoginGate({ onUnlock }: { onUnlock: () => void }) {
return ( return (
<main className="login-shell"> <main className="login-shell">
<section className="login-card"> <section className="login-card">
<p className="eyebrow">3proxy control plane</p> <p className="eyebrow">3proxy UI</p>
<h1>Minimal panel, operator-first signal.</h1> <h1>Panel access</h1>
<p className="lede"> <p className="lede">Hardcoded credentials for the current prototype build.</p>
The first slice focuses on clarity: health, users, quotas, and system controls without
dashboard noise.
</p>
<form className="login-form" onSubmit={handleSubmit}> <form className="login-form" onSubmit={handleSubmit}>
<label> <label>
Login Login
@@ -69,7 +66,7 @@ function LoginGate({ onUnlock }: { onUnlock: () => void }) {
</form> </form>
<div className="login-note"> <div className="login-note">
<span>Prototype auth is intentionally hardcoded.</span> <span>Prototype auth is intentionally hardcoded.</span>
<span>Runtime-backed auth will replace this in the next phase.</span> <span>Backend-backed access control comes next.</span>
</div> </div>
</section> </section>
</main> </main>
@@ -83,12 +80,9 @@ function DashboardTab() {
<section className="tab-grid"> <section className="tab-grid">
<article className="panel-card hero-card"> <article className="panel-card hero-card">
<div> <div>
<p className="eyebrow">3proxy runtime</p> <p className="eyebrow">Service</p>
<h2>Service health stays front and center.</h2> <h2>3proxy status</h2>
<p className="muted"> <p className="muted">Health, process metadata, and restart actions.</p>
The live card will be wired to process health and graceful reload endpoints in the next
implementation step.
</p>
</div> </div>
<div className="hero-status"> <div className="hero-status">
<span className={`status-pill ${serviceTone}`}>{dashboardSnapshot.service.status}</span> <span className={`status-pill ${serviceTone}`}>{dashboardSnapshot.service.status}</span>
@@ -126,7 +120,7 @@ function DashboardTab() {
<article className="panel-card"> <article className="panel-card">
<p className="section-label">User pressure</p> <p className="section-label">User pressure</p>
<strong className="metric">{dashboardSnapshot.users.total}</strong> <strong className="metric">{dashboardSnapshot.users.total}</strong>
<p className="muted">Configured users in the current proxy profile.</p> <p className="muted">Configured users in the active profile.</p>
<div className="stat-stack"> <div className="stat-stack">
<div> <div>
<span>Live now</span> <span>Live now</span>
@@ -174,7 +168,7 @@ function UsersTab() {
<section className="tab-grid users-grid"> <section className="tab-grid users-grid">
<article className="panel-card user-form-card"> <article className="panel-card user-form-card">
<p className="section-label">Add user</p> <p className="section-label">Add user</p>
<h2>Shape new access without leaving the panel.</h2> <h2>New account</h2>
<form className="user-form"> <form className="user-form">
<label> <label>
Username Username
@@ -195,8 +189,7 @@ function UsersTab() {
<button type="button">Queue user creation</button> <button type="button">Queue user creation</button>
</form> </form>
<p className="muted"> <p className="muted">
Final flow will write `users`, `allow`, and quota counters into generated 3proxy config Final flow will write `users`, `allow`, and quota counters into generated runtime files.
and data files.
</p> </p>
</article> </article>
@@ -204,7 +197,7 @@ function UsersTab() {
<div className="table-header"> <div className="table-header">
<div> <div>
<p className="section-label">Users</p> <p className="section-label">Users</p>
<h2>Traffic, quota, and copyable proxy links.</h2> <h2>Accounts and usage</h2>
</div> </div>
<span className="muted">{dashboardSnapshot.userRecords.length} rows</span> <span className="muted">{dashboardSnapshot.userRecords.length} rows</span>
</div> </div>
@@ -283,7 +276,7 @@ function SystemTab() {
<section className="tab-grid system-grid"> <section className="tab-grid system-grid">
<article className="panel-card"> <article className="panel-card">
<p className="section-label">Runtime model</p> <p className="section-label">Runtime model</p>
<h2>One place for ports, services, and reload strategy.</h2> <h2>Ports and reload mode</h2>
<div className="system-stats"> <div className="system-stats">
<div> <div>
<span>Config mode</span> <span>Config mode</span>
@@ -309,7 +302,7 @@ function SystemTab() {
<div className="table-header"> <div className="table-header">
<div> <div>
<p className="section-label">Generated config preview</p> <p className="section-label">Generated config preview</p>
<h2>Readable before it becomes writable.</h2> <h2>Generated config</h2>
</div> </div>
<span className="muted">View-only for now</span> <span className="muted">View-only for now</span>
</div> </div>
@@ -332,10 +325,8 @@ export default function App() {
<aside className="sidebar"> <aside className="sidebar">
<div className="brand-block"> <div className="brand-block">
<p className="eyebrow">3proxy UI</p> <p className="eyebrow">3proxy UI</p>
<h1>Operator panel</h1> <h1>Control panel</h1>
<p className="muted"> <p className="muted">Dashboard, users, and system settings.</p>
Dashboard, users, and system settings aligned with official 3proxy primitives.
</p>
</div> </div>
<nav className="nav-list" aria-label="Primary"> <nav className="nav-list" aria-label="Primary">

334
src/app.css
View File

@@ -1,32 +1,28 @@
:root { :root {
font-family: Aptos, "Segoe UI Variable", "Segoe UI", sans-serif; font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.5; line-height: 1.5;
font-weight: 400; font-weight: 400;
color: #d9dddf; color: #18212b;
background: background: #f4f6f8;
radial-gradient(circle at top left, rgba(203, 140, 62, 0.12), transparent 35%),
radial-gradient(circle at bottom right, rgba(79, 143, 122, 0.14), transparent 28%),
linear-gradient(180deg, #11161a 0%, #0a0e11 100%);
font-synthesis: none; font-synthesis: none;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
--bg: #0d1115; --bg: #f4f6f8;
--bg-elevated: rgba(18, 24, 28, 0.86); --surface: #ffffff;
--bg-soft: rgba(237, 223, 201, 0.06); --surface-soft: #f8fafb;
--line: rgba(255, 255, 255, 0.09); --border: #dde4ea;
--line-strong: rgba(255, 255, 255, 0.16); --border-strong: #cbd5dd;
--text: #f5f5ef; --text: #18212b;
--text-muted: #99a4a8; --muted: #667380;
--accent: #d8b064; --accent: #1f6feb;
--accent-strong: #efc16a; --accent-soft: #edf4ff;
--accent-soft: rgba(216, 176, 100, 0.16); --success: #16794c;
--success: #6ed2a9; --warn: #9a6700;
--warn: #ffcb72; --danger: #b42318;
--danger: #ff8578; --idle: #667380;
--idle: #899399; --shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
--shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
} }
* { * {
@@ -37,6 +33,8 @@ body {
margin: 0; margin: 0;
min-width: 320px; min-width: 320px;
min-height: 100vh; min-height: 100vh;
background: var(--bg);
color: var(--text);
} }
button, button,
@@ -46,13 +44,9 @@ input {
button { button {
cursor: pointer; cursor: pointer;
border: none;
}
#app {
min-height: 100vh;
} }
#app,
.login-shell, .login-shell,
.app-shell { .app-shell {
min-height: 100vh; min-height: 100vh;
@@ -61,35 +55,34 @@ button {
.login-shell { .login-shell {
display: grid; display: grid;
place-items: center; place-items: center;
padding: 32px; padding: 24px;
} }
.login-card, .login-card,
.panel-card, .panel-card,
.sidebar, .sidebar,
.topbar { .topbar {
border: 1px solid var(--line); background: var(--surface);
background: var(--bg-elevated); border: 1px solid var(--border);
backdrop-filter: blur(18px);
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
.login-card { .login-card {
width: min(100%, 540px); width: min(100%, 420px);
padding: 36px; padding: 28px;
border-radius: 28px; border-radius: 16px;
display: grid; display: grid;
gap: 20px; gap: 18px;
animation: rise-in 0.6s ease-out;
} }
.eyebrow, .eyebrow,
.section-label { .section-label {
margin: 0; margin: 0;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.18em; color: var(--muted);
font-size: 0.78rem;
color: var(--accent-strong);
} }
.login-card h1, .login-card h1,
@@ -97,13 +90,10 @@ button {
.panel-card h2, .panel-card h2,
.topbar h2 { .topbar h2 {
margin: 0; margin: 0;
font-family: "Aptos Display", Aptos, "Segoe UI Variable", sans-serif;
line-height: 1.02;
color: var(--text); color: var(--text);
} font-size: 1.375rem;
line-height: 1.25;
.login-card h1 { font-weight: 600;
font-size: clamp(2.4rem, 6vw, 4.25rem);
} }
.lede, .lede,
@@ -111,9 +101,10 @@ button {
.attention-item p, .attention-item p,
.sidebar-foot p, .sidebar-foot p,
.service-row span, .service-row span,
.user-cell span { .user-cell span,
.nav-item small {
margin: 0; margin: 0;
color: var(--text-muted); color: var(--muted);
} }
.login-form, .login-form,
@@ -125,24 +116,25 @@ button {
.login-form label, .login-form label,
.user-form label { .user-form label {
display: grid; display: grid;
gap: 8px; gap: 6px;
color: var(--text); color: var(--text);
font-size: 0.94rem;
} }
.login-form input, .login-form input,
.user-form input { .user-form input {
width: 100%; width: 100%;
padding: 14px 16px; padding: 10px 12px;
border-radius: 14px; border-radius: 10px;
border: 1px solid var(--line); border: 1px solid var(--border-strong);
background: rgba(255, 255, 255, 0.04); background: var(--surface);
color: var(--text); color: var(--text);
} }
.login-form input:focus, .login-form input:focus,
.user-form input:focus { .user-form input:focus {
outline: 2px solid rgba(216, 176, 100, 0.55); outline: 2px solid rgba(31, 111, 235, 0.18);
outline-offset: 1px; border-color: var(--accent);
} }
.login-form button, .login-form button,
@@ -152,155 +144,146 @@ button {
.danger-link, .danger-link,
.nav-item { .nav-item {
transition: transition:
transform 0.16s ease, background-color 0.15s ease,
background-color 0.16s ease, border-color 0.15s ease,
border-color 0.16s ease, color 0.15s ease;
color 0.16s ease;
} }
.login-form button, .login-form button,
.action-row button, .action-row button,
.user-form button { .user-form button {
padding: 14px 18px; padding: 10px 14px;
border-radius: 14px; border-radius: 10px;
background: linear-gradient(135deg, #efc16a 0%, #c98d3e 100%); border: 1px solid var(--accent);
color: #121315; background: var(--accent);
font-weight: 700; color: #ffffff;
font-weight: 600;
} }
.secondary { .secondary {
background: transparent !important; border-color: var(--border-strong) !important;
background: var(--surface) !important;
color: var(--text) !important; color: var(--text) !important;
border: 1px solid var(--line-strong);
} }
.login-form button:hover, .login-form button:hover,
.action-row button:hover, .action-row button:hover,
.user-form button:hover, .user-form button:hover {
.copy-link:hover, filter: brightness(0.98);
.danger-link:hover,
.nav-item:hover {
transform: translateY(-1px);
} }
.form-error { .form-error {
margin: 0; margin: 0;
color: var(--danger); color: var(--danger);
font-size: 0.92rem;
} }
.login-note { .login-note {
display: grid; display: grid;
gap: 4px; gap: 4px;
padding-top: 4px; padding-top: 6px;
color: var(--text-muted); border-top: 1px solid var(--border);
border-top: 1px solid var(--line); color: var(--muted);
font-size: 0.9rem;
} }
.app-shell { .app-shell {
display: grid; display: grid;
grid-template-columns: 320px minmax(0, 1fr); grid-template-columns: 260px minmax(0, 1fr);
gap: 18px; gap: 16px;
padding: 18px; padding: 16px;
} }
.sidebar { .sidebar {
border-radius: 28px; border-radius: 14px;
padding: 28px 22px; padding: 20px;
display: grid; display: grid;
gap: 28px; gap: 20px;
align-self: start;
position: sticky; position: sticky;
top: 18px; top: 16px;
max-height: calc(100vh - 36px);
} }
.brand-block { .brand-block {
display: grid; display: grid;
gap: 12px; gap: 8px;
} }
.brand-block h1 { .brand-block h1 {
font-size: 2rem; font-size: 1.25rem;
} }
.nav-list { .nav-list {
display: grid; display: grid;
gap: 10px; gap: 8px;
} }
.nav-item { .nav-item {
padding: 16px; padding: 12px;
border-radius: 18px; border-radius: 10px;
text-align: left; text-align: left;
background: rgba(255, 255, 255, 0.03);
border: 1px solid transparent; border: 1px solid transparent;
background: transparent;
color: var(--text); color: var(--text);
display: grid; display: grid;
gap: 4px; gap: 2px;
}
.nav-item small {
color: var(--text-muted);
} }
.nav-item.active { .nav-item.active {
background: var(--accent-soft); background: var(--accent-soft);
border-color: rgba(239, 193, 106, 0.3); border-color: #cfe0ff;
} }
.sidebar-foot { .sidebar-foot {
margin-top: auto;
display: grid; display: grid;
gap: 10px; gap: 8px;
padding-top: 20px; padding-top: 16px;
border-top: 1px solid var(--line); border-top: 1px solid var(--border);
} }
.content-shell { .content-shell {
display: grid; display: grid;
gap: 18px; gap: 16px;
} }
.topbar { .topbar {
padding: 22px 26px; padding: 18px 20px;
border-radius: 24px; border-radius: 14px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 18px; gap: 16px;
align-items: center; align-items: center;
animation: rise-in 0.4s ease-out;
} }
.topbar-meta { .topbar-meta {
display: flex; display: flex;
gap: 12px; gap: 10px;
flex-wrap: wrap; flex-wrap: wrap;
color: var(--text-muted); color: var(--muted);
font-size: 0.92rem;
} }
.tab-grid { .tab-grid {
display: grid; display: grid;
gap: 18px; gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
.users-grid, .users-grid,
.system-grid { .system-grid {
grid-template-columns: 1.1fr 1.9fr; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
} }
.panel-card { .panel-card {
border-radius: 24px; border-radius: 14px;
padding: 24px; padding: 20px;
display: grid; display: grid;
gap: 18px; gap: 16px;
min-width: 0; min-width: 0;
animation: rise-in 0.55s ease-out both;
} }
.hero-card { .hero-card {
background: background: var(--surface);
linear-gradient(160deg, rgba(216, 176, 100, 0.14), transparent 55%),
var(--bg-elevated);
} }
.hero-status, .hero-status,
@@ -310,43 +293,45 @@ button {
.service-row, .service-row,
.system-stats { .system-stats {
display: flex; display: flex;
gap: 12px; gap: 10px;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
} }
.metric { .metric {
font-size: clamp(2rem, 4vw, 3.3rem); font-size: 2rem;
line-height: 1; line-height: 1;
color: var(--text); color: var(--text);
font-weight: 600;
} }
.sparkline-list, .sparkline-list,
.attention-list, .attention-list,
.service-list { .service-list {
display: grid; display: grid;
gap: 12px; gap: 10px;
} }
.sparkline-row { .sparkline-row {
display: grid; display: grid;
grid-template-columns: 72px minmax(0, 1fr) 90px; grid-template-columns: 56px minmax(0, 1fr) 88px;
gap: 12px; gap: 10px;
align-items: center; align-items: center;
color: var(--text-muted); font-size: 0.92rem;
color: var(--muted);
} }
.sparkline-track { .sparkline-track {
height: 10px; height: 8px;
border-radius: 999px; border-radius: 999px;
background: rgba(255, 255, 255, 0.06); background: #edf1f4;
overflow: hidden; overflow: hidden;
} }
.sparkline-track div { .sparkline-track div {
height: 100%; height: 100%;
border-radius: inherit; border-radius: inherit;
background: linear-gradient(90deg, #8cd4a8 0%, #efc16a 100%); background: #7aa7e8;
} }
.stat-stack { .stat-stack {
@@ -355,40 +340,40 @@ button {
.stat-stack div, .stat-stack div,
.system-stats div { .system-stats div {
flex: 1 1 140px; flex: 1 1 120px;
display: grid; display: grid;
gap: 6px; gap: 4px;
padding: 14px; padding: 12px;
border: 1px solid var(--line); border: 1px solid var(--border);
border-radius: 18px; border-radius: 12px;
background: var(--bg-soft); background: var(--surface-soft);
} }
.attention-item, .attention-item,
.service-row { .service-row {
padding: 14px 16px; padding: 12px 14px;
border-radius: 18px; border-radius: 12px;
border: 1px solid var(--line); border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.03); background: var(--surface-soft);
} }
.dot { .dot {
width: 10px; width: 8px;
height: 10px; height: 8px;
border-radius: 999px; border-radius: 999px;
flex: none; flex: none;
} }
.dot.warn { .dot.warn {
background: var(--warn); background: #d4a72c;
} }
.dot.live { .dot.live {
background: var(--success); background: #2da66a;
} }
.dot.fail { .dot.fail {
background: var(--danger); background: #d95040;
} }
.table-card, .table-card,
@@ -399,34 +384,38 @@ button {
.table-header { .table-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 12px;
align-items: start; align-items: start;
} }
.table-wrap { .table-wrap {
overflow: auto; overflow: auto;
border: 1px solid var(--line); border: 1px solid var(--border);
border-radius: 20px; border-radius: 12px;
} }
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
min-width: 720px; min-width: 700px;
background: var(--surface);
} }
th, th,
td { td {
padding: 16px 18px; padding: 13px 14px;
text-align: left; text-align: left;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--border);
font-size: 0.94rem;
} }
th { th {
color: var(--text-muted); color: var(--muted);
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.12em; letter-spacing: 0.05em;
font-size: 0.76rem; background: var(--surface-soft);
} }
tbody tr:last-child td { tbody tr:last-child td {
@@ -442,39 +431,39 @@ tbody tr:last-child td {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 7px 11px; min-height: 28px;
padding: 4px 10px;
border-radius: 999px; border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.11em;
font-size: 0.72rem; font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
border: 1px solid currentColor; border: 1px solid currentColor;
background: #ffffff;
} }
.status-pill.live { .status-pill.live {
color: var(--success); color: var(--success);
background: rgba(110, 210, 169, 0.09);
} }
.status-pill.warn { .status-pill.warn {
color: var(--warn); color: var(--warn);
background: rgba(255, 203, 114, 0.09);
} }
.status-pill.fail { .status-pill.fail {
color: var(--danger); color: var(--danger);
background: rgba(255, 133, 120, 0.09);
} }
.status-pill.idle { .status-pill.idle {
color: var(--idle); color: var(--idle);
background: rgba(137, 147, 153, 0.09);
} }
.copy-link, .copy-link,
.danger-link { .danger-link {
padding: 10px 14px; padding: 8px 12px;
border-radius: 12px; border-radius: 10px;
background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-strong);
background: var(--surface);
color: var(--text); color: var(--text);
} }
@@ -493,13 +482,14 @@ tbody tr:last-child td {
pre { pre {
margin: 0; margin: 0;
padding: 18px; padding: 14px;
border-radius: 20px; border-radius: 12px;
overflow: auto; overflow: auto;
background: #090d10; border: 1px solid var(--border);
border: 1px solid var(--line); background: #fbfcfd;
color: #d4dad5; color: #24303c;
font-family: "Cascadia Code", "IBM Plex Mono", Consolas, monospace; font-family: Consolas, "Courier New", monospace;
font-size: 0.88rem;
line-height: 1.6; line-height: 1.6;
} }
@@ -510,7 +500,6 @@ pre {
.sidebar { .sidebar {
position: static; position: static;
max-height: none;
} }
.tab-grid, .tab-grid,
@@ -530,8 +519,7 @@ pre {
.sidebar, .sidebar,
.panel-card, .panel-card,
.topbar { .topbar {
border-radius: 22px; padding: 16px;
padding: 20px;
} }
.topbar { .topbar {
@@ -540,26 +528,10 @@ pre {
} }
.sparkline-row { .sparkline-row {
grid-template-columns: 64px minmax(0, 1fr); grid-template-columns: 52px minmax(0, 1fr);
} }
.sparkline-row span:last-child { .sparkline-row span:last-child {
grid-column: 2; grid-column: 2;
} }
.table-wrap {
border-radius: 16px;
}
}
@keyframes rise-in {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }