style: simplify panel to minimalist layout

This commit is contained in:
2026-04-01 23:12:35 +03:00
parent 0d035f3278
commit f6262fa721
4 changed files with 170 additions and 206 deletions

View File

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