style: rebuild ui shell with stable minimalist layout

src/App.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, KeyboardEvent, useEffect, useMemo, useState } from 'react';
+import { FormEvent, KeyboardEvent, useEffect, useState } from 'react';
 import './app.css';
 import { dashboardSnapshot, panelAuth } from './data/mockDashboard';
 import {
@@ -38,9 +38,10 @@ function LoginGate({ onUnlock }: { onUnlock: () => void }) {
   return (
     <main className="login-shell">
       <section className="login-card">
-        <p className="eyebrow">3proxy UI</p>
-        <h1>Panel access</h1>
-        <p className="lede">Hardcoded credentials for the current prototype build.</p>
+        <div className="login-copy">
+          <h1>3proxy UI</h1>
+          <p>Sign in to the control panel.</p>
+        </div>
         <form className="login-form" onSubmit={handleSubmit}>
           <label>
             Login
@@ -64,102 +65,12 @@ function LoginGate({ onUnlock }: { onUnlock: () => void }) {
           <button type="submit">Open panel</button>
           {error ? <p className="form-error">{error}</p> : null}
         </form>
-        <div className="login-note">
-          <span>Prototype auth is intentionally hardcoded.</span>
-          <span>Backend-backed access control comes next.</span>
-        </div>
       </section>
     </main>
   );
 }
 
-function DashboardTab() {
-  const serviceTone = getServiceTone(dashboardSnapshot.service.status);
-
-  return (
-    <section className="tab-grid">
-      <article className="panel-card hero-card">
-        <div>
-          <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>
-          <span>{dashboardSnapshot.service.pidLabel}</span>
-          <span>{dashboardSnapshot.service.versionLabel}</span>
-        </div>
-        <div className="action-row">
-          <button type="button">Start</button>
-          <button type="button" className="secondary">
-            Restart
-          </button>
-        </div>
-      </article>
-
-      <article className="panel-card">
-        <p className="section-label">Traffic</p>
-        <strong className="metric">{formatBytes(dashboardSnapshot.traffic.totalBytes)}</strong>
-        <p className="muted">
-          {dashboardSnapshot.traffic.liveConnections} live connections across{' '}
-          {dashboardSnapshot.traffic.activeUsers} active users.
-        </p>
-        <div className="sparkline-list">
-          {dashboardSnapshot.traffic.daily.map((bucket) => (
-            <div key={bucket.day} className="sparkline-row">
-              <span>{bucket.day}</span>
-              <div className="sparkline-track">
-                <div style={{ width: `${bucket.share * 100}%` }} />
-              </div>
-              <span>{formatBytes(bucket.bytes)}</span>
-            </div>
-          ))}
-        </div>
-      </article>
-
-      <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 active profile.</p>
-        <div className="stat-stack">
-          <div>
-            <span>Live now</span>
-            <strong>{dashboardSnapshot.users.live}</strong>
-          </div>
-          <div>
-            <span>Near quota</span>
-            <strong>{dashboardSnapshot.users.nearQuota}</strong>
-          </div>
-          <div>
-            <span>Exceeded</span>
-            <strong>{dashboardSnapshot.users.exceeded}</strong>
-          </div>
-        </div>
-      </article>
-
-      <article className="panel-card">
-        <p className="section-label">Runtime attention</p>
-        <div className="attention-list">
-          {dashboardSnapshot.attention.map((item) => (
-            <div key={item.title} className="attention-item">
-              <span className={`dot ${item.level}`} />
-              <div>
-                <strong>{item.title}</strong>
-                <p>{item.message}</p>
-              </div>
-            </div>
-          ))}
-        </div>
-      </article>
-    </section>
-  );
-}
-
-function AddUserModal({
-  onClose,
-}: {
-  onClose: () => void;
-}) {
+function AddUserModal({ onClose }: { onClose: () => void }) {
   useEffect(() => {
     const handleKeyDown = (event: globalThis.KeyboardEvent) => {
       if (event.key === 'Escape') {
@@ -186,11 +97,8 @@ function AddUserModal({
         onClick={stopPropagation}
       >
         <div className="modal-header">
-          <div>
-            <p className="section-label">Users</p>
-            <h2 id="add-user-title">Add user</h2>
-          </div>
-          <button type="button" className="ghost-button" onClick={onClose}>
+          <h2 id="add-user-title">Add user</h2>
+          <button type="button" className="button-secondary" onClick={onClose}>
             Close
           </button>
         </div>
@@ -212,7 +120,7 @@ function AddUserModal({
             <input placeholder="Optional" />
           </label>
           <div className="modal-actions">
-            <button type="button" className="secondary" onClick={onClose}>
+            <button type="button" className="button-secondary" onClick={onClose}>
               Cancel
             </button>
             <button type="button">Create user</button>
@@ -223,6 +131,99 @@ function AddUserModal({
   );
 }
 
+function DashboardTab() {
+  const serviceTone = getServiceTone(dashboardSnapshot.service.status);
+
+  return (
+    <section className="page-grid">
+      <article className="panel-card">
+        <div className="card-header">
+          <h2>Service</h2>
+          <span className={`status-pill ${serviceTone}`}>{dashboardSnapshot.service.status}</span>
+        </div>
+        <dl className="kv-list">
+          <div>
+            <dt>Process</dt>
+            <dd>{dashboardSnapshot.service.pidLabel}</dd>
+          </div>
+          <div>
+            <dt>Version</dt>
+            <dd>{dashboardSnapshot.service.versionLabel}</dd>
+          </div>
+          <div>
+            <dt>Uptime</dt>
+            <dd>{dashboardSnapshot.service.uptimeLabel}</dd>
+          </div>
+          <div>
+            <dt>Last event</dt>
+            <dd>{dashboardSnapshot.service.lastEvent}</dd>
+          </div>
+        </dl>
+        <div className="actions-row">
+          <button type="button">Start</button>
+          <button type="button" className="button-secondary">
+            Restart
+          </button>
+        </div>
+      </article>
+
+      <article className="panel-card">
+        <div className="card-header">
+          <h2>Traffic</h2>
+        </div>
+        <div className="stats-strip">
+          <div>
+            <span>Total</span>
+            <strong>{formatBytes(dashboardSnapshot.traffic.totalBytes)}</strong>
+          </div>
+          <div>
+            <span>Connections</span>
+            <strong>{dashboardSnapshot.traffic.liveConnections}</strong>
+          </div>
+          <div>
+            <span>Active users</span>
+            <strong>{dashboardSnapshot.traffic.activeUsers}</strong>
+          </div>
+        </div>
+      </article>
+
+      <article className="panel-card">
+        <div className="card-header">
+          <h2>Daily usage</h2>
+        </div>
+        <div className="usage-list">
+          {dashboardSnapshot.traffic.daily.map((bucket) => (
+            <div key={bucket.day} className="usage-row">
+              <span>{bucket.day}</span>
+              <div className="usage-bar">
+                <div style={{ width: `${bucket.share * 100}%` }} />
+              </div>
+              <strong>{formatBytes(bucket.bytes)}</strong>
+            </div>
+          ))}
+        </div>
+      </article>
+
+      <article className="panel-card">
+        <div className="card-header">
+          <h2>Attention</h2>
+        </div>
+        <div className="event-list">
+          {dashboardSnapshot.attention.map((item) => (
+            <div key={item.title} className="event-row">
+              <span className={`event-marker ${item.level}`} />
+              <div>
+                <strong>{item.title}</strong>
+                <p>{item.message}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </article>
+    </section>
+  );
+}
+
 function UsersTab() {
   const [copiedId, setCopiedId] = useState<string | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -234,132 +235,128 @@ function UsersTab() {
   };
 
   return (
-    <section className="tab-grid users-grid">
-      <article className="panel-card table-card">
-        <div className="table-header">
-          <div>
-            <p className="section-label">Users</p>
-            <h2>Accounts and usage</h2>
+    <>
+      <section className="page-grid single-column">
+        <article className="panel-card">
+          <div className="table-toolbar">
+            <div className="toolbar-title">
+              <h2>Users</h2>
+              <p>{dashboardSnapshot.userRecords.length} accounts in current profile</p>
+            </div>
+            <div className="toolbar-actions">
+              <div className="summary-pills">
+                <span>{dashboardSnapshot.users.live} live</span>
+                <span>{dashboardSnapshot.users.nearQuota} near quota</span>
+                <span>{dashboardSnapshot.users.exceeded} exceeded</span>
+              </div>
+              <button type="button" onClick={() => setIsModalOpen(true)}>
+                New user
+              </button>
+            </div>
           </div>
-          <div className="header-actions">
-            <span className="muted">{dashboardSnapshot.userRecords.length} rows</span>
-            <button type="button" onClick={() => setIsModalOpen(true)}>
-              New user
-            </button>
-          </div>
-        </div>
-        <div className="table-wrap">
-          <table>
-            <thead>
-              <tr>
-                <th>User</th>
-                <th>Endpoint</th>
-                <th>Status</th>
-                <th>Used</th>
-                <th>Remaining</th>
-                <th>Proxy</th>
-              </tr>
-            </thead>
-            <tbody>
-              {dashboardSnapshot.userRecords.map((user) => {
-                const proxyLink = buildProxyLink(user.username, user.password, user.host, user.port);
-                const exhausted = isQuotaExceeded(user.usedBytes, user.quotaBytes);
+          <div className="table-wrap">
+            <table>
+              <thead>
+                <tr>
+                  <th>User</th>
+                  <th>Endpoint</th>
+                  <th>Status</th>
+                  <th>Used</th>
+                  <th>Remaining</th>
+                  <th>Share</th>
+                  <th>Proxy</th>
+                </tr>
+              </thead>
+              <tbody>
+                {dashboardSnapshot.userRecords.map((user) => {
+                  const proxyLink = buildProxyLink(user.username, user.password, user.host, user.port);
+                  const exhausted = isQuotaExceeded(user.usedBytes, user.quotaBytes);
 
-                return (
-                  <tr key={user.id}>
-                    <td>
-                      <div className="user-cell">
-                        <strong>{user.username}</strong>
-                        <span>{user.port}</span>
-                      </div>
-                    </td>
-                    <td>{`${user.host}:${user.port}`}</td>
-                    <td>
-                      <span className={`status-pill ${getServiceTone(user.status)}`}>{user.status}</span>
-                    </td>
-                    <td>{formatBytes(user.usedBytes)}</td>
-                    <td>{formatQuotaState(user.usedBytes, user.quotaBytes)}</td>
-                    <td>
-                      <button
-                        type="button"
-                        className={exhausted ? 'danger-link' : 'copy-link'}
-                        onClick={() => handleCopy(user.id, proxyLink)}
-                      >
-                        {copiedId === user.id ? 'Copied' : 'Copy'}
-                      </button>
-                    </td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
-        </div>
-        <div className="table-foot muted">
-          Total traffic share is derived from current snapshot: {formatTrafficShare(
-            dashboardSnapshot.userRecords.reduce((sum, user) => sum + user.usedBytes, 0),
-            dashboardSnapshot.traffic.totalBytes,
-          )}
-        </div>
-      </article>
+                  return (
+                    <tr key={user.id}>
+                      <td>
+                        <div className="user-cell">
+                          <strong>{user.username}</strong>
+                        </div>
+                      </td>
+                      <td>{`${user.host}:${user.port}`}</td>
+                      <td>
+                        <span className={`status-pill ${getServiceTone(user.status)}`}>{user.status}</span>
+                      </td>
+                      <td>{formatBytes(user.usedBytes)}</td>
+                      <td>{formatQuotaState(user.usedBytes, user.quotaBytes)}</td>
+                      <td>{formatTrafficShare(user.usedBytes, dashboardSnapshot.traffic.totalBytes)}</td>
+                      <td>
+                        <button
+                          type="button"
+                          className={exhausted ? 'copy-button danger' : 'copy-button'}
+                          onClick={() => handleCopy(user.id, proxyLink)}
+                        >
+                          {copiedId === user.id ? 'Copied' : 'Copy'}
+                        </button>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </article>
+      </section>
 
       {isModalOpen ? <AddUserModal onClose={() => setIsModalOpen(false)} /> : null}
-    </section>
+    </>
   );
 }
 
 function SystemTab() {
-  const serviceToggles = useMemo(
-    () =>
-      dashboardSnapshot.system.services.map((service) => (
-        <div key={service.name} className="service-row">
-          <div>
-            <strong>{service.name}</strong>
-            <span>{service.description}</span>
-          </div>
-          <div className="service-meta">
-            <span>:{service.port}</span>
-            <span className={`status-pill ${service.enabled ? 'live' : 'idle'}`}>
-              {service.enabled ? 'enabled' : 'disabled'}
-            </span>
-          </div>
-        </div>
-      )),
-    [],
-  );
-
   return (
-    <section className="tab-grid system-grid">
+    <section className="page-grid system-grid">
       <article className="panel-card">
-        <p className="section-label">Runtime model</p>
-        <h2>Ports and reload mode</h2>
-        <div className="system-stats">
+        <div className="card-header">
+          <h2>Runtime</h2>
+        </div>
+        <dl className="kv-list">
           <div>
-            <span>Config mode</span>
-            <strong>{dashboardSnapshot.system.configMode}</strong>
+            <dt>Config mode</dt>
+            <dd>{dashboardSnapshot.system.configMode}</dd>
           </div>
           <div>
-            <span>Reload</span>
-            <strong>{dashboardSnapshot.system.reloadMode}</strong>
+            <dt>Reload</dt>
+            <dd>{dashboardSnapshot.system.reloadMode}</dd>
           </div>
           <div>
-            <span>Storage</span>
-            <strong>{dashboardSnapshot.system.storageMode}</strong>
+            <dt>Storage</dt>
+            <dd>{dashboardSnapshot.system.storageMode}</dd>
           </div>
+        </dl>
+      </article>
+
+      <article className="panel-card">
+        <div className="card-header">
+          <h2>Services</h2>
+        </div>
+        <div className="service-list">
+          {dashboardSnapshot.system.services.map((service) => (
+            <div key={service.name} className="service-row">
+              <div>
+                <strong>{service.name}</strong>
+                <p>{service.description}</p>
+              </div>
+              <div className="service-meta">
+                <span>{service.port}</span>
+                <span className={`status-pill ${service.enabled ? 'live' : 'idle'}`}>
+                  {service.enabled ? 'enabled' : 'disabled'}
+                </span>
+              </div>
+            </div>
+          ))}
         </div>
       </article>
 
-      <article className="panel-card">
-        <p className="section-label">Services</p>
-        <div className="service-list">{serviceToggles}</div>
-      </article>
-
-      <article className="panel-card config-card">
-        <div className="table-header">
-          <div>
-            <p className="section-label">Generated config preview</p>
-            <h2>Generated config</h2>
-          </div>
-          <span className="muted">View-only for now</span>
+      <article className="panel-card wide-card">
+        <div className="card-header">
+          <h2>Generated config</h2>
         </div>
         <pre>{dashboardSnapshot.system.previewConfig}</pre>
       </article>
@@ -376,50 +373,44 @@ export default function App() {
   }
 
   return (
-    <main className="app-shell">
-      <aside className="sidebar">
-        <div className="brand-block">
-          <p className="eyebrow">3proxy UI</p>
-          <h1>Control panel</h1>
+    <main className="shell">
+      <header className="shell-header">
+        <div className="shell-title">
+          <h1>3proxy UI</h1>
+          <p>{dashboardSnapshot.system.publicHost}</p>
         </div>
-
-        <nav className="nav-list" aria-label="Primary">
-          {tabs.map((tab) => (
-            <button
-              key={tab.id}
-              type="button"
-              className={activeTab === tab.id ? 'nav-item active' : 'nav-item'}
-              onClick={() => setActiveTab(tab.id)}
-            >
-              <span>{tab.label}</span>
-            </button>
-          ))}
-        </nav>
-
-        <div className="sidebar-foot">
-          <span className={`status-pill ${getServiceTone(dashboardSnapshot.service.status)}`}>
-            {dashboardSnapshot.service.status}
-          </span>
-          <p>{dashboardSnapshot.service.lastEvent}</p>
-        </div>
-      </aside>
-
-      <section className="content-shell">
-        <header className="topbar">
+        <div className="header-meta">
           <div>
-            <p className="section-label">Current host</p>
-            <h2>{dashboardSnapshot.system.publicHost}</h2>
+            <span>Status</span>
+            <strong>{dashboardSnapshot.service.status}</strong>
           </div>
-          <div className="topbar-meta">
-            <span>{dashboardSnapshot.service.status}</span>
-            <span>{dashboardSnapshot.service.versionLabel}</span>
+          <div>
+            <span>Version</span>
+            <strong>{dashboardSnapshot.service.versionLabel}</strong>
           </div>
-        </header>
+          <div>
+            <span>Users</span>
+            <strong>{dashboardSnapshot.users.total}</strong>
+          </div>
+        </div>
+      </header>
 
-        {activeTab === 'dashboard' ? <DashboardTab /> : null}
-        {activeTab === 'users' ? <UsersTab /> : null}
-        {activeTab === 'system' ? <SystemTab /> : null}
-      </section>
+      <nav className="tabbar" aria-label="Primary">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            type="button"
+            className={activeTab === tab.id ? 'tab-button active' : 'tab-button'}
+            onClick={() => setActiveTab(tab.id)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </nav>
+
+      {activeTab === 'dashboard' ? <DashboardTab /> : null}
+      {activeTab === 'users' ? <UsersTab /> : null}
+      {activeTab === 'system' ? <SystemTab /> : null}
     </main>
   );
 }