From f6262fa721c666501e1b263818b64558783a9dc1 Mon Sep 17 00:00:00 2001
From: rednakse <box@rednakse.ru>
Date: Wed, 1 Apr 2026 23:12:35 +0300
Subject: [PATCH] style: simplify panel to minimalist layout

---
 docs/PLAN.md     |   1 +
 src/App.test.tsx |   2 +-
 src/App.tsx      |  39 +++---
 src/app.css      | 334 ++++++++++++++++++++++-------------------------
 4 files changed, 170 insertions(+), 206 deletions(-)

diff --git a/docs/PLAN.md b/docs/PLAN.md
index a0a6f9d..3ecc726 100644
--- a/docs/PLAN.md
+++ b/docs/PLAN.md
@@ -18,3 +18,4 @@ Updated: 2026-04-01
 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.
 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.
diff --git a/src/App.test.tsx b/src/App.test.tsx
index faa01cf..1db8154 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -25,6 +25,6 @@ describe('App login gate', () => {
     await user.click(screen.getByRole('button', { name: /open panel/i }));
 
     expect(screen.getByRole('navigation', { name: /primary/i })).toBeInTheDocument();
-    expect(screen.getByText(/operator panel/i)).toBeInTheDocument();
+    expect(screen.getByText(/control panel/i)).toBeInTheDocument();
   });
 });
diff --git a/src/App.tsx b/src/App.tsx
index bbf78d6..103e61d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -38,12 +38,9 @@ function LoginGate({ onUnlock }: { onUnlock: () => void }) {
   return (
     <main className="login-shell">
       <section className="login-card">
-        <p className="eyebrow">3proxy control plane</p>
-        <h1>Minimal panel, operator-first signal.</h1>
-        <p className="lede">
-          The first slice focuses on clarity: health, users, quotas, and system controls without
-          dashboard noise.
-        </p>
+        <p className="eyebrow">3proxy UI</p>
+        <h1>Panel access</h1>
+        <p className="lede">Hardcoded credentials for the current prototype build.</p>
         <form className="login-form" onSubmit={handleSubmit}>
           <label>
             Login
@@ -69,7 +66,7 @@ function LoginGate({ onUnlock }: { onUnlock: () => void }) {
         </form>
         <div className="login-note">
           <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>
       </section>
     </main>
@@ -83,12 +80,9 @@ function DashboardTab() {
     <section className="tab-grid">
       <article className="panel-card hero-card">
         <div>
-          <p className="eyebrow">3proxy runtime</p>
-          <h2>Service health stays front and center.</h2>
-          <p className="muted">
-            The live card will be wired to process health and graceful reload endpoints in the next
-            implementation step.
-          </p>
+          <p className="eyebrow">Service</p>
+          <h2>3proxy status</h2>
+          <p className="muted">Health, process metadata, and restart actions.</p>
         </div>
         <div className="hero-status">
           <span className={`status-pill ${serviceTone}`}>{dashboardSnapshot.service.status}</span>
@@ -126,7 +120,7 @@ function DashboardTab() {
       <article className="panel-card">
         <p className="section-label">User pressure</p>
         <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>
             <span>Live now</span>
@@ -174,7 +168,7 @@ function UsersTab() {
     <section className="tab-grid users-grid">
       <article className="panel-card user-form-card">
         <p className="section-label">Add user</p>
-        <h2>Shape new access without leaving the panel.</h2>
+        <h2>New account</h2>
         <form className="user-form">
           <label>
             Username
@@ -195,8 +189,7 @@ function UsersTab() {
           <button type="button">Queue user creation</button>
         </form>
         <p className="muted">
-          Final flow will write `users`, `allow`, and quota counters into generated 3proxy config
-          and data files.
+          Final flow will write `users`, `allow`, and quota counters into generated runtime files.
         </p>
       </article>
 
@@ -204,7 +197,7 @@ function UsersTab() {
         <div className="table-header">
           <div>
             <p className="section-label">Users</p>
-            <h2>Traffic, quota, and copyable proxy links.</h2>
+            <h2>Accounts and usage</h2>
           </div>
           <span className="muted">{dashboardSnapshot.userRecords.length} rows</span>
         </div>
@@ -283,7 +276,7 @@ function SystemTab() {
     <section className="tab-grid system-grid">
       <article className="panel-card">
         <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>
             <span>Config mode</span>
@@ -309,7 +302,7 @@ function SystemTab() {
         <div className="table-header">
           <div>
             <p className="section-label">Generated config preview</p>
-            <h2>Readable before it becomes writable.</h2>
+            <h2>Generated config</h2>
           </div>
           <span className="muted">View-only for now</span>
         </div>
@@ -332,10 +325,8 @@ export default function App() {
       <aside className="sidebar">
         <div className="brand-block">
           <p className="eyebrow">3proxy UI</p>
-          <h1>Operator panel</h1>
-          <p className="muted">
-            Dashboard, users, and system settings aligned with official 3proxy primitives.
-          </p>
+          <h1>Control panel</h1>
+          <p className="muted">Dashboard, users, and system settings.</p>
         </div>
 
         <nav className="nav-list" aria-label="Primary">
diff --git a/src/app.css b/src/app.css
index cec7606..1cac8dc 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,32 +1,28 @@
 :root {
-  font-family: Aptos, "Segoe UI Variable", "Segoe UI", sans-serif;
+  font-family: "Segoe UI", Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
-  color: #d9dddf;
-  background:
-    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%);
+  color: #18212b;
+  background: #f4f6f8;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  --bg: #0d1115;
-  --bg-elevated: rgba(18, 24, 28, 0.86);
-  --bg-soft: rgba(237, 223, 201, 0.06);
-  --line: rgba(255, 255, 255, 0.09);
-  --line-strong: rgba(255, 255, 255, 0.16);
-  --text: #f5f5ef;
-  --text-muted: #99a4a8;
-  --accent: #d8b064;
-  --accent-strong: #efc16a;
-  --accent-soft: rgba(216, 176, 100, 0.16);
-  --success: #6ed2a9;
-  --warn: #ffcb72;
-  --danger: #ff8578;
-  --idle: #899399;
-  --shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
+  --bg: #f4f6f8;
+  --surface: #ffffff;
+  --surface-soft: #f8fafb;
+  --border: #dde4ea;
+  --border-strong: #cbd5dd;
+  --text: #18212b;
+  --muted: #667380;
+  --accent: #1f6feb;
+  --accent-soft: #edf4ff;
+  --success: #16794c;
+  --warn: #9a6700;
+  --danger: #b42318;
+  --idle: #667380;
+  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
 }
 
 * {
@@ -37,6 +33,8 @@ body {
   margin: 0;
   min-width: 320px;
   min-height: 100vh;
+  background: var(--bg);
+  color: var(--text);
 }
 
 button,
@@ -46,13 +44,9 @@ input {
 
 button {
   cursor: pointer;
-  border: none;
-}
-
-#app {
-  min-height: 100vh;
 }
 
+#app,
 .login-shell,
 .app-shell {
   min-height: 100vh;
@@ -61,35 +55,34 @@ button {
 .login-shell {
   display: grid;
   place-items: center;
-  padding: 32px;
+  padding: 24px;
 }
 
 .login-card,
 .panel-card,
 .sidebar,
 .topbar {
-  border: 1px solid var(--line);
-  background: var(--bg-elevated);
-  backdrop-filter: blur(18px);
+  background: var(--surface);
+  border: 1px solid var(--border);
   box-shadow: var(--shadow);
 }
 
 .login-card {
-  width: min(100%, 540px);
-  padding: 36px;
-  border-radius: 28px;
+  width: min(100%, 420px);
+  padding: 28px;
+  border-radius: 16px;
   display: grid;
-  gap: 20px;
-  animation: rise-in 0.6s ease-out;
+  gap: 18px;
 }
 
 .eyebrow,
 .section-label {
   margin: 0;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
-  letter-spacing: 0.18em;
-  font-size: 0.78rem;
-  color: var(--accent-strong);
+  color: var(--muted);
 }
 
 .login-card h1,
@@ -97,13 +90,10 @@ button {
 .panel-card h2,
 .topbar h2 {
   margin: 0;
-  font-family: "Aptos Display", Aptos, "Segoe UI Variable", sans-serif;
-  line-height: 1.02;
   color: var(--text);
-}
-
-.login-card h1 {
-  font-size: clamp(2.4rem, 6vw, 4.25rem);
+  font-size: 1.375rem;
+  line-height: 1.25;
+  font-weight: 600;
 }
 
 .lede,
@@ -111,9 +101,10 @@ button {
 .attention-item p,
 .sidebar-foot p,
 .service-row span,
-.user-cell span {
+.user-cell span,
+.nav-item small {
   margin: 0;
-  color: var(--text-muted);
+  color: var(--muted);
 }
 
 .login-form,
@@ -125,24 +116,25 @@ button {
 .login-form label,
 .user-form label {
   display: grid;
-  gap: 8px;
+  gap: 6px;
   color: var(--text);
+  font-size: 0.94rem;
 }
 
 .login-form input,
 .user-form input {
   width: 100%;
-  padding: 14px 16px;
-  border-radius: 14px;
-  border: 1px solid var(--line);
-  background: rgba(255, 255, 255, 0.04);
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--border-strong);
+  background: var(--surface);
   color: var(--text);
 }
 
 .login-form input:focus,
 .user-form input:focus {
-  outline: 2px solid rgba(216, 176, 100, 0.55);
-  outline-offset: 1px;
+  outline: 2px solid rgba(31, 111, 235, 0.18);
+  border-color: var(--accent);
 }
 
 .login-form button,
@@ -152,155 +144,146 @@ button {
 .danger-link,
 .nav-item {
   transition:
-    transform 0.16s ease,
-    background-color 0.16s ease,
-    border-color 0.16s ease,
-    color 0.16s ease;
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
 }
 
 .login-form button,
 .action-row button,
 .user-form button {
-  padding: 14px 18px;
-  border-radius: 14px;
-  background: linear-gradient(135deg, #efc16a 0%, #c98d3e 100%);
-  color: #121315;
-  font-weight: 700;
+  padding: 10px 14px;
+  border-radius: 10px;
+  border: 1px solid var(--accent);
+  background: var(--accent);
+  color: #ffffff;
+  font-weight: 600;
 }
 
 .secondary {
-  background: transparent !important;
+  border-color: var(--border-strong) !important;
+  background: var(--surface) !important;
   color: var(--text) !important;
-  border: 1px solid var(--line-strong);
 }
 
 .login-form button:hover,
 .action-row button:hover,
-.user-form button:hover,
-.copy-link:hover,
-.danger-link:hover,
-.nav-item:hover {
-  transform: translateY(-1px);
+.user-form button:hover {
+  filter: brightness(0.98);
 }
 
 .form-error {
   margin: 0;
   color: var(--danger);
+  font-size: 0.92rem;
 }
 
 .login-note {
   display: grid;
   gap: 4px;
-  padding-top: 4px;
-  color: var(--text-muted);
-  border-top: 1px solid var(--line);
+  padding-top: 6px;
+  border-top: 1px solid var(--border);
+  color: var(--muted);
+  font-size: 0.9rem;
 }
 
 .app-shell {
   display: grid;
-  grid-template-columns: 320px minmax(0, 1fr);
-  gap: 18px;
-  padding: 18px;
+  grid-template-columns: 260px minmax(0, 1fr);
+  gap: 16px;
+  padding: 16px;
 }
 
 .sidebar {
-  border-radius: 28px;
-  padding: 28px 22px;
+  border-radius: 14px;
+  padding: 20px;
   display: grid;
-  gap: 28px;
+  gap: 20px;
+  align-self: start;
   position: sticky;
-  top: 18px;
-  max-height: calc(100vh - 36px);
+  top: 16px;
 }
 
 .brand-block {
   display: grid;
-  gap: 12px;
+  gap: 8px;
 }
 
 .brand-block h1 {
-  font-size: 2rem;
+  font-size: 1.25rem;
 }
 
 .nav-list {
   display: grid;
-  gap: 10px;
+  gap: 8px;
 }
 
 .nav-item {
-  padding: 16px;
-  border-radius: 18px;
+  padding: 12px;
+  border-radius: 10px;
   text-align: left;
-  background: rgba(255, 255, 255, 0.03);
   border: 1px solid transparent;
+  background: transparent;
   color: var(--text);
   display: grid;
-  gap: 4px;
-}
-
-.nav-item small {
-  color: var(--text-muted);
+  gap: 2px;
 }
 
 .nav-item.active {
   background: var(--accent-soft);
-  border-color: rgba(239, 193, 106, 0.3);
+  border-color: #cfe0ff;
 }
 
 .sidebar-foot {
-  margin-top: auto;
   display: grid;
-  gap: 10px;
-  padding-top: 20px;
-  border-top: 1px solid var(--line);
+  gap: 8px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border);
 }
 
 .content-shell {
   display: grid;
-  gap: 18px;
+  gap: 16px;
 }
 
 .topbar {
-  padding: 22px 26px;
-  border-radius: 24px;
+  padding: 18px 20px;
+  border-radius: 14px;
   display: flex;
   justify-content: space-between;
-  gap: 18px;
+  gap: 16px;
   align-items: center;
-  animation: rise-in 0.4s ease-out;
 }
 
 .topbar-meta {
   display: flex;
-  gap: 12px;
+  gap: 10px;
   flex-wrap: wrap;
-  color: var(--text-muted);
+  color: var(--muted);
+  font-size: 0.92rem;
 }
 
 .tab-grid {
   display: grid;
-  gap: 18px;
+  gap: 16px;
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
 .users-grid,
 .system-grid {
-  grid-template-columns: 1.1fr 1.9fr;
+  grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
 }
 
 .panel-card {
-  border-radius: 24px;
-  padding: 24px;
+  border-radius: 14px;
+  padding: 20px;
   display: grid;
-  gap: 18px;
+  gap: 16px;
   min-width: 0;
-  animation: rise-in 0.55s ease-out both;
 }
 
 .hero-card {
-  background:
-    linear-gradient(160deg, rgba(216, 176, 100, 0.14), transparent 55%),
-    var(--bg-elevated);
+  background: var(--surface);
 }
 
 .hero-status,
@@ -310,43 +293,45 @@ button {
 .service-row,
 .system-stats {
   display: flex;
-  gap: 12px;
+  gap: 10px;
   flex-wrap: wrap;
   align-items: center;
 }
 
 .metric {
-  font-size: clamp(2rem, 4vw, 3.3rem);
+  font-size: 2rem;
   line-height: 1;
   color: var(--text);
+  font-weight: 600;
 }
 
 .sparkline-list,
 .attention-list,
 .service-list {
   display: grid;
-  gap: 12px;
+  gap: 10px;
 }
 
 .sparkline-row {
   display: grid;
-  grid-template-columns: 72px minmax(0, 1fr) 90px;
-  gap: 12px;
+  grid-template-columns: 56px minmax(0, 1fr) 88px;
+  gap: 10px;
   align-items: center;
-  color: var(--text-muted);
+  font-size: 0.92rem;
+  color: var(--muted);
 }
 
 .sparkline-track {
-  height: 10px;
+  height: 8px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.06);
+  background: #edf1f4;
   overflow: hidden;
 }
 
 .sparkline-track div {
   height: 100%;
   border-radius: inherit;
-  background: linear-gradient(90deg, #8cd4a8 0%, #efc16a 100%);
+  background: #7aa7e8;
 }
 
 .stat-stack {
@@ -355,40 +340,40 @@ button {
 
 .stat-stack div,
 .system-stats div {
-  flex: 1 1 140px;
+  flex: 1 1 120px;
   display: grid;
-  gap: 6px;
-  padding: 14px;
-  border: 1px solid var(--line);
-  border-radius: 18px;
-  background: var(--bg-soft);
+  gap: 4px;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--surface-soft);
 }
 
 .attention-item,
 .service-row {
-  padding: 14px 16px;
-  border-radius: 18px;
-  border: 1px solid var(--line);
-  background: rgba(255, 255, 255, 0.03);
+  padding: 12px 14px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--surface-soft);
 }
 
 .dot {
-  width: 10px;
-  height: 10px;
+  width: 8px;
+  height: 8px;
   border-radius: 999px;
   flex: none;
 }
 
 .dot.warn {
-  background: var(--warn);
+  background: #d4a72c;
 }
 
 .dot.live {
-  background: var(--success);
+  background: #2da66a;
 }
 
 .dot.fail {
-  background: var(--danger);
+  background: #d95040;
 }
 
 .table-card,
@@ -399,34 +384,38 @@ button {
 .table-header {
   display: flex;
   justify-content: space-between;
-  gap: 16px;
+  gap: 12px;
   align-items: start;
 }
 
 .table-wrap {
   overflow: auto;
-  border: 1px solid var(--line);
-  border-radius: 20px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
 }
 
 table {
   width: 100%;
   border-collapse: collapse;
-  min-width: 720px;
+  min-width: 700px;
+  background: var(--surface);
 }
 
 th,
 td {
-  padding: 16px 18px;
+  padding: 13px 14px;
   text-align: left;
-  border-bottom: 1px solid var(--line);
+  border-bottom: 1px solid var(--border);
+  font-size: 0.94rem;
 }
 
 th {
-  color: var(--text-muted);
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.12em;
-  font-size: 0.76rem;
+  letter-spacing: 0.05em;
+  background: var(--surface-soft);
 }
 
 tbody tr:last-child td {
@@ -442,39 +431,39 @@ tbody tr:last-child td {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 7px 11px;
+  min-height: 28px;
+  padding: 4px 10px;
   border-radius: 999px;
-  text-transform: uppercase;
-  letter-spacing: 0.11em;
   font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
   border: 1px solid currentColor;
+  background: #ffffff;
 }
 
 .status-pill.live {
   color: var(--success);
-  background: rgba(110, 210, 169, 0.09);
 }
 
 .status-pill.warn {
   color: var(--warn);
-  background: rgba(255, 203, 114, 0.09);
 }
 
 .status-pill.fail {
   color: var(--danger);
-  background: rgba(255, 133, 120, 0.09);
 }
 
 .status-pill.idle {
   color: var(--idle);
-  background: rgba(137, 147, 153, 0.09);
 }
 
 .copy-link,
 .danger-link {
-  padding: 10px 14px;
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.04);
+  padding: 8px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--border-strong);
+  background: var(--surface);
   color: var(--text);
 }
 
@@ -493,13 +482,14 @@ tbody tr:last-child td {
 
 pre {
   margin: 0;
-  padding: 18px;
-  border-radius: 20px;
+  padding: 14px;
+  border-radius: 12px;
   overflow: auto;
-  background: #090d10;
-  border: 1px solid var(--line);
-  color: #d4dad5;
-  font-family: "Cascadia Code", "IBM Plex Mono", Consolas, monospace;
+  border: 1px solid var(--border);
+  background: #fbfcfd;
+  color: #24303c;
+  font-family: Consolas, "Courier New", monospace;
+  font-size: 0.88rem;
   line-height: 1.6;
 }
 
@@ -510,7 +500,6 @@ pre {
 
   .sidebar {
     position: static;
-    max-height: none;
   }
 
   .tab-grid,
@@ -530,8 +519,7 @@ pre {
   .sidebar,
   .panel-card,
   .topbar {
-    border-radius: 22px;
-    padding: 20px;
+    padding: 16px;
   }
 
   .topbar {
@@ -540,26 +528,10 @@ pre {
   }
 
   .sparkline-row {
-    grid-template-columns: 64px minmax(0, 1fr);
+    grid-template-columns: 52px minmax(0, 1fr);
   }
 
   .sparkline-row span:last-child {
     grid-column: 2;
   }
-
-  .table-wrap {
-    border-radius: 16px;
-  }
-}
-
-@keyframes rise-in {
-  from {
-    opacity: 0;
-    transform: translateY(12px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
 }