feat: move user creation into modal flow

src/App.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, useMemo, useState } from 'react';
+import { FormEvent, KeyboardEvent, useEffect, useMemo, useState } from 'react';
 import './app.css';
 import { dashboardSnapshot, panelAuth } from './data/mockDashboard';
 import {
@@ -12,10 +12,10 @@ import {
 
 type TabId = 'dashboard' | 'users' | 'system';
 
-const tabs: Array<{ id: TabId; label: string; description: string }> = [
-  { id: 'dashboard', label: 'Dashboard', description: 'Health, traffic, quick actions' },
-  { id: 'users', label: 'Users', description: 'Accounts, quotas, quick-copy links' },
-  { id: 'system', label: 'System', description: 'Config profile, ports, runtime controls' },
+const tabs: Array<{ id: TabId; label: string }> = [
+  { id: 'dashboard', label: 'Dashboard' },
+  { id: 'users', label: 'Users' },
+  { id: 'system', label: 'System' },
 ];
 
 function LoginGate({ onUnlock }: { onUnlock: () => void }) {
@@ -155,8 +155,77 @@ function DashboardTab() {
   );
 }
 
+function AddUserModal({
+  onClose,
+}: {
+  onClose: () => void;
+}) {
+  useEffect(() => {
+    const handleKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
+  const stopPropagation = (event: KeyboardEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+  };
+
+  return (
+    <div className="modal-backdrop" role="presentation" onClick={onClose}>
+      <section
+        aria-labelledby="add-user-title"
+        aria-modal="true"
+        className="modal-card"
+        role="dialog"
+        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}>
+            Close
+          </button>
+        </div>
+        <form className="modal-form">
+          <label>
+            Username
+            <input autoFocus placeholder="night-shift-01" />
+          </label>
+          <label>
+            Password
+            <input placeholder="generated secret" />
+          </label>
+          <label>
+            Port
+            <input placeholder="1080" />
+          </label>
+          <label>
+            Quota (MB)
+            <input placeholder="Optional" />
+          </label>
+          <div className="modal-actions">
+            <button type="button" className="secondary" onClick={onClose}>
+              Cancel
+            </button>
+            <button type="button">Create user</button>
+          </div>
+        </form>
+      </section>
+    </div>
+  );
+}
+
 function UsersTab() {
   const [copiedId, setCopiedId] = useState<string | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleCopy = async (userId: string, proxyLink: string) => {
     await navigator.clipboard.writeText(proxyLink);
@@ -166,50 +235,28 @@ function UsersTab() {
 
   return (
     <section className="tab-grid users-grid">
-      <article className="panel-card user-form-card">
-        <p className="section-label">Add user</p>
-        <h2>New account</h2>
-        <form className="user-form">
-          <label>
-            Username
-            <input placeholder="night-shift-01" />
-          </label>
-          <label>
-            Password
-            <input placeholder="generated secret" />
-          </label>
-          <label>
-            Service port
-            <input placeholder="1080" />
-          </label>
-          <label>
-            Quota (MB)
-            <input placeholder="Optional" />
-          </label>
-          <button type="button">Queue user creation</button>
-        </form>
-        <p className="muted">
-          Final flow will write `users`, `allow`, and quota counters into generated runtime files.
-        </p>
-      </article>
-
       <article className="panel-card table-card">
         <div className="table-header">
           <div>
             <p className="section-label">Users</p>
             <h2>Accounts and usage</h2>
           </div>
-          <span className="muted">{dashboardSnapshot.userRecords.length} rows</span>
+          <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>Traffic</th>
-                <th>Quota</th>
-                <th>Share</th>
+                <th>Used</th>
+                <th>Remaining</th>
                 <th>Proxy</th>
               </tr>
             </thead>
@@ -223,15 +270,15 @@ function UsersTab() {
                     <td>
                       <div className="user-cell">
                         <strong>{user.username}</strong>
-                        <span>{user.host}</span>
+                        <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>{formatTrafficShare(user.usedBytes, dashboardSnapshot.traffic.totalBytes)}</td>
                     <td>
                       <button
                         type="button"
@@ -247,7 +294,15 @@ function UsersTab() {
             </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>
+
+      {isModalOpen ? <AddUserModal onClose={() => setIsModalOpen(false)} /> : null}
     </section>
   );
 }
@@ -326,7 +381,6 @@ export default function App() {
         <div className="brand-block">
           <p className="eyebrow">3proxy UI</p>
           <h1>Control panel</h1>
-          <p className="muted">Dashboard, users, and system settings.</p>
         </div>
 
         <nav className="nav-list" aria-label="Primary">
@@ -338,7 +392,6 @@ export default function App() {
               onClick={() => setActiveTab(tab.id)}
             >
               <span>{tab.label}</span>
-              <small>{tab.description}</small>
             </button>
           ))}
         </nav>
@@ -358,8 +411,8 @@ export default function App() {
             <h2>{dashboardSnapshot.system.publicHost}</h2>
           </div>
           <div className="topbar-meta">
+            <span>{dashboardSnapshot.service.status}</span>
             <span>{dashboardSnapshot.service.versionLabel}</span>
-            <span>{dashboardSnapshot.service.uptimeLabel}</span>
           </div>
         </header>