feat: simplify mac client interface

src/web/components/ClientOverviewPage.jsx

@@ -1,119 +1,126 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { flagFor } from '../utils/country.js';
-import { formatBytes, formatRelative } from '../utils/format.js';
+import { formatRelative } from '../utils/format.js';
+import { resolveClientRoute } from '../utils/clientRoute.js';
 
-function CopyField({ label, value }) {
+function CopyValue({ value }) {
   const [copied, setCopied] = useState(false);
 
   async function copy() {
     await navigator.clipboard.writeText(value);
     setCopied(true);
-    setTimeout(() => setCopied(false), 1400);
+    setTimeout(() => setCopied(false), 1200);
   }
 
   return (
-    <div className="copy-field">
-      <div>
-        <small className="muted">{label}</small>
-        <div className="text-mono">{value}</div>
-      </div>
-      <button className="btn btn-secondary sm" onClick={copy}>
-        {copied ? 'Скопировано' : 'Копировать'}
-      </button>
-    </div>
+    <button className="client-copy" type="button" onClick={copy}>
+      <span>{value}</span>
+      <strong>{copied ? 'OK' : 'Copy'}</strong>
+    </button>
   );
 }
 
-function ClientHero({ state, status, activeServer }) {
-  const homeBypass = Boolean(state?.clientSettings?.homeBypassEnabled);
-  const sharedProxy = Boolean(state?.clientSettings?.sharedProxyEnabled);
-  const cfg = {
-    running: {
-      title: 'Локальный proxy работает',
-      hint: activeServer ? `Подключен сервер ${activeServer.tag}` : 'Сервер применён',
-      badge: 'Готов',
-      kind: 'success',
-    },
-    applying: {
-      title: 'Применяем сервер',
-      hint: 'sing-box перезапускается',
-      badge: 'Применяем',
-      kind: 'warning',
-    },
-    error: {
-      title: 'Нужна проверка',
-      hint: 'Откройте логи и config',
-      badge: 'Ошибка',
-      kind: 'danger',
-    },
-    stopped: {
-      title: 'Proxy остановлен',
-      hint: 'Конфиг есть, sing-box не запущен',
-      badge: 'Остановлен',
-      kind: 'warning',
-    },
-    no_config: {
-      title: 'Proxy ещё не настроен',
-      hint: 'Загрузите подписку и выберите сервер',
-      badge: 'Не настроен',
-      kind: 'neutral',
-    },
-  }[status] || {};
-  const view = sharedProxy
-    ? {
-        ...cfg,
-        title: 'Общий gateway proxy',
-        hint: 'Локальный proxy отправляет трафик на серверный gateway',
-        badge: 'Gateway',
-        kind: 'success',
-      }
-    : homeBypass
-    ? {
-        ...cfg,
-        title: 'Домашний режим: VPN выключен',
-        hint: 'Локальный proxy работает напрямую',
-        badge: 'Напрямую',
-        kind: 'info',
-      }
-    : cfg;
-
-  const userInfo = state?.userInfo;
-  const traffic = userInfo
-    ? `${formatBytes((userInfo.upload || 0) + (userInfo.download || 0))}${userInfo.total ? ' / ' + formatBytes(userInfo.total) : ''}`
-    : 'нет данных';
+function StatusPanel({ route, state }) {
+  const statusLabel = {
+    connected: 'Работает',
+    stopped: 'Остановлен',
+    empty: 'Не настроен',
+  }[route.status];
 
   return (
-    <section className="client-hero">
-      <div className="client-hero-main">
-        <span className={`badge ${view.kind}`}>{view.badge}</span>
-        <h1>{view.title}</h1>
-        <p>{view.hint}</p>
+    <section className={`client-status-panel ${route.status}`}>
+      <div className="client-status-main">
+        <span className={`client-status-dot ${route.status}`} />
+        <div>
+          <div className="client-eyebrow">Текущий маршрут</div>
+          <h1>{route.title}</h1>
+          <p>{route.description}</p>
+        </div>
       </div>
-      <div className="client-hero-meta">
+      <div className="client-status-facts">
         <div>
-          <small className="muted">Активный сервер</small>
-          <strong>
-            {sharedProxy
-              ? `${state?.clientSettings?.sharedProxy?.host}:${state?.clientSettings?.sharedProxy?.port}`
-              : homeBypass
-                ? 'Не используется дома'
-                : activeServer ? `${flagFor(activeServer)} ${activeServer.tag}` : state?.selectedTag || 'Не выбран'}
-          </strong>
+          <small>Куда</small>
+          <strong>{route.target}</strong>
+          <span>{route.targetDetail}</span>
         </div>
         <div>
-          <small className="muted">Трафик</small>
-          <strong>{traffic}</strong>
+          <small>Локальный proxy</small>
+          <strong>{route.localProxy}</strong>
+          <span>HTTP и SOCKS5</span>
         </div>
         <div>
-          <small className="muted">Применено</small>
-          <strong>{state?.appliedAt ? formatRelative(state.appliedAt) : 'ещё нет'}</strong>
+          <small>Сервис</small>
+          <strong>{statusLabel}</strong>
+          <span>{state?.appliedAt ? `применено ${formatRelative(state.appliedAt)}` : 'нет примененного config'}</span>
         </div>
       </div>
     </section>
   );
 }
 
-function ClientSetup({
+function RouteLine({ route }) {
+  return (
+    <div className="client-route-line">
+      {route.path.map((item, index) => (
+        <React.Fragment key={`${item}-${index}`}>
+          <span>{item}</span>
+          {index < route.path.length - 1 && <b>→</b>}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+function ModeButton({ active, selected, title, subtitle, onClick, disabled }) {
+  return (
+    <button
+      type="button"
+      className={`client-mode-button ${selected ? 'selected' : ''} ${active ? 'active' : ''}`}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      <strong>{title}</strong>
+      <span>{subtitle}</span>
+    </button>
+  );
+}
+
+function GatewaySettings({ settings, busy, onCheck }) {
+  const [draftUrl, setDraftUrl] = useState(settings?.sharedProxyControlUrl || '');
+  const sharedProxy = settings?.sharedProxy;
+
+  useEffect(() => {
+    setDraftUrl(settings?.sharedProxyControlUrl || '');
+  }, [settings?.sharedProxyControlUrl]);
+
+  return (
+    <div className="client-mode-settings">
+      <div className="field">
+        <label className="field-label">Адрес gateway UI</label>
+        <div className="client-inline-form">
+          <input
+            className="input"
+            placeholder="http://192.168.50.111:3456"
+            value={draftUrl}
+            onChange={(e) => setDraftUrl(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && draftUrl && onCheck(draftUrl)}
+          />
+          <button className="btn btn-primary" disabled={busy || !draftUrl} onClick={() => onCheck(draftUrl)}>
+            Подключить
+          </button>
+        </div>
+      </div>
+      {sharedProxy && (
+        <div className="client-current-target">
+          <small>Найден общий proxy</small>
+          <strong>{sharedProxy.host}:{sharedProxy.port}</strong>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function VpnSettings({
   state,
   servers,
   subscriptionUrl,
@@ -125,20 +132,13 @@ function ClientSetup({
   onApply,
 }) {
   const selected = pendingTag || state?.selectedTag || '';
-  const canApply = selected && selected !== state?.selectedTag;
-  const homeBypass = Boolean(state?.clientSettings?.homeBypassEnabled);
-  const sharedProxy = Boolean(state?.clientSettings?.sharedProxyEnabled);
+  const activeServer = servers.find((server) => server.tag === selected);
 
   return (
-    <div className="card client-setup">
-      <div className="card-header">
-        <h2>Подключение</h2>
-        {state?.hasSubscription && <span className="badge success">Подписка загружена</span>}
-      </div>
-
+    <div className="client-mode-settings">
       <div className="field">
-        <label className="field-label">URL подписки или VLESS-ссылка</label>
-        <div className="subscription-input">
+        <label className="field-label">Подписка или VLESS</label>
+        <div className="client-inline-form">
           <input
             className="input"
             placeholder="https://… или vless://…"
@@ -146,15 +146,14 @@ function ClientSetup({
             onChange={(e) => setSubscriptionUrl(e.target.value)}
             onKeyDown={(e) => e.key === 'Enter' && subscriptionUrl && onFetchSubscription()}
           />
-          <button className="btn btn-primary" disabled={busy || !subscriptionUrl} onClick={onFetchSubscription}>
+          <button className="btn btn-secondary" disabled={busy || !subscriptionUrl} onClick={onFetchSubscription}>
             Загрузить
           </button>
         </div>
       </div>
-
       <div className="field">
         <label className="field-label">VPN-сервер</label>
-        <div className="subscription-input">
+        <div className="client-inline-form">
           <select
             className="select"
             value={selected}
@@ -168,77 +167,31 @@ function ClientSetup({
               </option>
             ))}
           </select>
-          <button className="btn btn-secondary" disabled={busy || !canApply} onClick={() => onApply(selected)}>
-            Применить
+          <button className="btn btn-primary" disabled={busy || !selected} onClick={() => onApply(selected)}>
+            Подключить
           </button>
         </div>
-        <small className="field-hint">
-          {sharedProxy
-            ? 'Включён общий gateway: локальный VPN-сервер не используется.'
-            : homeBypass
-            ? 'Домашний режим включён: proxy-трафик сейчас идёт напрямую без VPN.'
-            : 'В Mac-клиенте весь трафик, который приложение отправит в proxy, идёт через выбранный VPN.'}
-        </small>
+        {activeServer && <small className="field-hint">Выбран {flagFor(activeServer)} {activeServer.tag}</small>}
       </div>
     </div>
   );
 }
 
-function SharedProxyCard({ settings, busy, onCheck, onSave }) {
-  const enabled = Boolean(settings?.sharedProxyEnabled);
-  const sharedProxy = settings?.sharedProxy;
-  const [draftUrl, setDraftUrl] = useState(settings?.sharedProxyControlUrl || '');
-
-  useEffect(() => {
-    setDraftUrl(settings?.sharedProxyControlUrl || '');
-  }, [settings?.sharedProxyControlUrl]);
-
+function DirectSettings({ busy, onEnable }) {
   return (
-    <div className="card">
-      <div className="card-header">
-        <h2>Общий gateway</h2>
-        <span className={`badge ${enabled ? 'success' : 'neutral'}`}>
-          {enabled ? 'Подключён' : 'Не выбран'}
-        </span>
+    <div className="client-mode-settings direct">
+      <div>
+        <strong>Прямой режим</strong>
+        <p className="muted">Приложения продолжают использовать локальный proxy, но трафик идет без VPN и без gateway.</p>
       </div>
-      <p className="muted">
-        Укажите адрес серверного UI. Mac-клиент проверит <code>/api/shared-proxy</code> и переключит локальный proxy на общий gateway.
-      </p>
-      <div className="field">
-        <label className="field-label">Адрес gateway</label>
-        <div className="subscription-input">
-          <input
-            className="input"
-            placeholder="http://192.168.50.111:3456"
-            value={draftUrl}
-            onChange={(e) => setDraftUrl(e.target.value)}
-            onKeyDown={(e) => e.key === 'Enter' && draftUrl && onCheck(draftUrl)}
-          />
-          <button className="btn btn-primary" disabled={busy || !draftUrl} onClick={() => onCheck(draftUrl)}>
-            Проверить
-          </button>
-        </div>
-      </div>
-      {sharedProxy && (
-        <div className="copy-stack" style={{ marginTop: 12 }}>
-          <CopyField label="Gateway SOCKS5" value={`socks5://${sharedProxy.host}:${sharedProxy.port}`} />
-        </div>
-      )}
-      {enabled && (
-        <button
-          className="btn btn-ghost sm"
-          style={{ marginTop: 12 }}
-          disabled={busy}
-          onClick={() => onSave({ ...settings, sharedProxyEnabled: false })}
-        >
-          Вернуться к локальному VPN
-        </button>
-      )}
+      <button className="btn btn-primary" disabled={busy} onClick={onEnable}>
+        Включить напрямую
+      </button>
     </div>
   );
 }
 
-function ProxyCard({ state, settings, busy, onSave }) {
+function ProxySettings({ state, settings, busy, onSave }) {
   const range = state?.clientProxyPortRange || { start: 8080, end: 8090 };
   const port = settings?.proxyPort || state?.proxyPort || 8080;
   const [draftPort, setDraftPort] = useState(String(port));
@@ -247,26 +200,22 @@ function ProxyCard({ state, settings, busy, onSave }) {
     setDraftPort(String(port));
   }, [port]);
 
-  const parsedDraftPort = Number.parseInt(draftPort, 10);
-  const portInvalid =
-    !Number.isInteger(parsedDraftPort) ||
-    parsedDraftPort < range.start ||
-    parsedDraftPort > range.end;
-  const portDirty = !portInvalid && parsedDraftPort !== port;
-  const urls = useMemo(() => ({
-    http: `http://127.0.0.1:${port}`,
-    socks: `socks5://127.0.0.1:${port}`,
-  }), [port]);
+  const parsed = Number.parseInt(draftPort, 10);
+  const invalid = !Number.isInteger(parsed) || parsed < range.start || parsed > range.end;
+  const dirty = !invalid && parsed !== port;
 
   return (
-    <div className="card">
-      <div className="card-header">
-        <h2>Локальный proxy</h2>
-        <span className="badge info">127.0.0.1:{port}</span>
+    <aside className="client-side-panel">
+      <div>
+        <div className="client-panel-title">Адрес для приложений</div>
+        <div className="client-copy-stack">
+          <CopyValue value={`http://127.0.0.1:${port}`} />
+          <CopyValue value={`socks5://127.0.0.1:${port}`} />
+        </div>
       </div>
-      <div className="field" style={{ marginBottom: 12 }}>
+      <div className="field">
         <label className="field-label">Порт proxy</label>
-        <div className="subscription-input">
+        <div className="client-port-row">
           <input
             className="input"
             type="number"
@@ -277,107 +226,20 @@ function ProxyCard({ state, settings, busy, onSave }) {
           />
           <button
             className="btn btn-secondary"
-            disabled={busy || !portDirty}
-            onClick={() => onSave({ ...settings, proxyPort: parsedDraftPort })}
+            disabled={busy || !dirty}
+            onClick={() => onSave({ ...settings, proxyPort: parsed })}
           >
-            Сохранить
+            Save
           </button>
         </div>
-        <small className={portInvalid ? 'field-error' : 'field-hint'}>
-          Доступный диапазон: {range.start}–{range.end}
-        </small>
+        <small className={invalid ? 'field-error' : 'field-hint'}>{range.start}–{range.end}</small>
       </div>
-      <div className="copy-stack">
-        <CopyField label="HTTP / HTTPS" value={urls.http} />
-        <CopyField label="SOCKS5" value={urls.socks} />
-      </div>
-    </div>
-  );
-}
-
-function HomeBypassCard({ state, settings, busy, onSave }) {
-  const enabled = Boolean(settings?.homeBypassEnabled);
-  const sharedProxy = Boolean(settings?.sharedProxyEnabled);
-  const port = settings?.proxyPort || state?.proxyPort || 8080;
-
-  return (
-    <div className="card">
-      <div className="card-header">
-        <h2>Домашний режим</h2>
-        <span className={`badge ${enabled ? 'info' : 'neutral'}`}>
-          {enabled ? 'Напрямую' : 'Через VPN'}
-        </span>
-      </div>
-      <p className="muted">
-        Включайте дома: приложения продолжают использовать <code>127.0.0.1:{port}</code>, но VPN не используется.
-      </p>
-      <label className="switch-row">
-        <span>
-          <strong>Я дома</strong>
-          <small>{enabled ? 'Весь proxy-трафик идёт напрямую' : 'Весь proxy-трафик идёт через VPN'}</small>
-        </span>
-        <input
-          type="checkbox"
-          checked={enabled}
-          disabled={busy}
-          onChange={(e) => onSave({
-            ...settings,
-            homeBypassEnabled: e.target.checked,
-            sharedProxyEnabled: e.target.checked ? false : sharedProxy,
-          })}
-        />
-      </label>
-    </div>
-  );
-}
-
-function ClientFlow({ state, activeServer }) {
-  const homeBypass = Boolean(state?.clientSettings?.homeBypassEnabled);
-  const sharedProxy = Boolean(state?.clientSettings?.sharedProxyEnabled);
-  const shared = state?.clientSettings?.sharedProxy;
-  const steps = [
-    { label: 'Mac', value: 'приложения' },
-    { label: 'Локальный proxy', value: `127.0.0.1:${state?.proxyPort || 8080}` },
-    {
-      label: sharedProxy ? 'Общий gateway' : homeBypass ? 'Домашняя сеть' : 'VPN-сервер',
-      value: sharedProxy ? `${shared?.host}:${shared?.port}` : homeBypass ? 'напрямую' : activeServer?.tag || state?.selectedTag || 'не выбран',
-    },
-    { label: 'Интернет', value: state?.singboxRunning ? sharedProxy ? 'через gateway' : homeBypass ? 'без VPN' : 'через VPN' : 'ожидает' },
-  ];
-
-  return (
-    <div className="card">
-      <div className="card-header"><h2>Цепочка подключения</h2></div>
-      <div className="client-flow">
-        {steps.map((step, index) => (
-          <React.Fragment key={step.label}>
-            <div className="flow-node">
-              <small>{step.label}</small>
-              <strong>{step.value}</strong>
-            </div>
-            {index < steps.length - 1 && <span className="flow-arrow">→</span>}
-          </React.Fragment>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function ClientActions({ state, busy, onRestart, onStop }) {
-  return (
-    <div className="card">
-      <div className="card-header"><h2>Управление</h2></div>
-      <div className="btn-group">
-        <button className="btn btn-secondary" disabled={busy || !state?.configExists} onClick={onRestart}>Перезапустить</button>
-        <button className="btn btn-ghost" disabled={busy || !state?.singboxRunning} onClick={onStop}>Остановить</button>
-      </div>
-    </div>
+    </aside>
   );
 }
 
 export function ClientOverviewPage({
   state,
-  status,
   activeServer,
   busy,
   subscriptionUrl,
@@ -390,47 +252,114 @@ export function ClientOverviewPage({
   onCheckSharedProxy,
   onFetchSubscription,
   onApply,
-  onRestart,
-  onStop,
 }) {
+  const route = useMemo(
+    () => resolveClientRoute({ state, activeServer }),
+    [state, activeServer],
+  );
+  const [setupMode, setSetupMode] = useState(route.mode === 'none' ? 'gateway' : route.mode);
+
+  useEffect(() => {
+    if (route.mode !== 'none') setSetupMode(route.mode);
+  }, [route.mode]);
+
+  function enableDirect() {
+    return onSaveClientSettings({
+      ...clientSettings,
+      homeBypassEnabled: true,
+      sharedProxyEnabled: false,
+    });
+  }
+
+  function selectGateway() {
+    setSetupMode('gateway');
+    if (clientSettings?.sharedProxyControlUrl) {
+      return onCheckSharedProxy(clientSettings.sharedProxyControlUrl);
+    }
+    return null;
+  }
+
+  function selectVpn() {
+    setSetupMode('vpn');
+    if (state?.selectedTag) {
+      return onApply(state.selectedTag);
+    }
+    return onSaveClientSettings({
+      ...clientSettings,
+      homeBypassEnabled: false,
+      sharedProxyEnabled: false,
+    });
+  }
+
   return (
-    <div className="section-stack">
-      <ClientHero state={state} status={status} activeServer={activeServer} />
-      <ClientSetup
-        state={state}
-        servers={servers}
-        subscriptionUrl={subscriptionUrl}
-        setSubscriptionUrl={setSubscriptionUrl}
-        pendingTag={pendingTag}
-        setPendingTag={setPendingTag}
-        busy={busy}
-        onFetchSubscription={onFetchSubscription}
-        onApply={onApply}
-      />
-      <SharedProxyCard
-        settings={clientSettings}
-        busy={busy}
-        onCheck={onCheckSharedProxy}
-        onSave={onSaveClientSettings}
-      />
-      <div className="grid-2">
-        <ProxyCard
+    <div className="client-dashboard">
+      <StatusPanel route={route} state={state} />
+      <RouteLine route={route} />
+
+      <section className="client-workspace">
+        <div className="client-main-panel">
+          <div className="client-mode-grid">
+            <ModeButton
+              active={route.mode === 'gateway'}
+              selected={setupMode === 'gateway'}
+              title="Общий gateway"
+              subtitle={clientSettings?.sharedProxy ? `${clientSettings.sharedProxy.host}:${clientSettings.sharedProxy.port}` : 'серверная proxy'}
+              disabled={busy}
+              onClick={selectGateway}
+            />
+            <ModeButton
+              active={route.mode === 'vpn'}
+              selected={setupMode === 'vpn'}
+              title="Локальный VPN"
+              subtitle={state?.selectedTag || 'выбрать сервер'}
+              disabled={busy}
+              onClick={selectVpn}
+            />
+            <ModeButton
+              active={route.mode === 'direct'}
+              selected={setupMode === 'direct'}
+              title="Напрямую"
+              subtitle="без VPN"
+              disabled={busy}
+              onClick={() => {
+                setSetupMode('direct');
+                enableDirect();
+              }}
+            />
+          </div>
+
+          {setupMode === 'gateway' && (
+            <GatewaySettings
+              settings={clientSettings}
+              busy={busy}
+              onCheck={onCheckSharedProxy}
+            />
+          )}
+          {setupMode === 'vpn' && (
+            <VpnSettings
+              state={state}
+              servers={servers}
+              subscriptionUrl={subscriptionUrl}
+              setSubscriptionUrl={setSubscriptionUrl}
+              pendingTag={pendingTag}
+              setPendingTag={setPendingTag}
+              busy={busy}
+              onFetchSubscription={onFetchSubscription}
+              onApply={onApply}
+            />
+          )}
+          {setupMode === 'direct' && (
+            <DirectSettings busy={busy} onEnable={enableDirect} />
+          )}
+        </div>
+
+        <ProxySettings
           state={state}
           settings={clientSettings}
           busy={busy}
           onSave={onSaveClientSettings}
         />
-        <HomeBypassCard state={state} settings={clientSettings} busy={busy} onSave={onSaveClientSettings} />
-      </div>
-      <div className="grid-2">
-        <ClientActions
-          state={state}
-          busy={busy}
-          onRestart={onRestart}
-          onStop={onStop}
-        />
-      </div>
-      <ClientFlow state={state} activeServer={activeServer} />
+      </section>
     </div>
   );
 }