Add home bypass mode for the Mac client

src/web/components/ClientOverviewPage.jsx

@@ -25,6 +25,7 @@ function CopyField({ label, value }) {
 }
 
 function ClientHero({ state, status, activeServer }) {
+  const homeBypass = Boolean(state?.clientSettings?.homeBypassEnabled);
   const cfg = {
     running: {
       title: 'Локальный proxy работает',
@@ -57,6 +58,15 @@ function ClientHero({ state, status, activeServer }) {
       kind: 'neutral',
     },
   }[status] || {};
+  const view = homeBypass
+    ? {
+        ...cfg,
+        title: 'Домашний режим: VPN выключен',
+        hint: 'Локальный proxy работает напрямую',
+        badge: 'Напрямую',
+        kind: 'info',
+      }
+    : cfg;
 
   const userInfo = state?.userInfo;
   const traffic = userInfo
@@ -66,14 +76,14 @@ function ClientHero({ state, status, activeServer }) {
   return (
     <section className="client-hero">
       <div className="client-hero-main">
-        <span className={`badge ${cfg.kind}`}>{cfg.badge}</span>
-        <h1>{cfg.title}</h1>
-        <p>{cfg.hint}</p>
+        <span className={`badge ${view.kind}`}>{view.badge}</span>
+        <h1>{view.title}</h1>
+        <p>{view.hint}</p>
       </div>
       <div className="client-hero-meta">
         <div>
           <small className="muted">Активный сервер</small>
-          <strong>{activeServer ? `${flagFor(activeServer)} ${activeServer.tag}` : state?.selectedTag || 'Не выбран'}</strong>
+          <strong>{homeBypass ? 'Не используется дома' : activeServer ? `${flagFor(activeServer)} ${activeServer.tag}` : state?.selectedTag || 'Не выбран'}</strong>
         </div>
         <div>
           <small className="muted">Трафик</small>
@@ -101,6 +111,7 @@ function ClientSetup({
 }) {
   const selected = pendingTag || state?.selectedTag || '';
   const canApply = selected && selected !== state?.selectedTag;
+  const homeBypass = Boolean(state?.clientSettings?.homeBypassEnabled);
 
   return (
     <div className="card client-setup">
@@ -146,7 +157,9 @@ function ClientSetup({
           </button>
         </div>
         <small className="field-hint">
-          В Mac-клиенте весь трафик, который приложение отправит в proxy, идёт через выбранный VPN.
+          {homeBypass
+            ? 'Домашний режим включён: proxy-трафик сейчас идёт напрямую без VPN.'
+            : 'В Mac-клиенте весь трафик, который приложение отправит в proxy, идёт через выбранный VPN.'}
         </small>
       </div>
     </div>
@@ -174,12 +187,43 @@ function ProxyCard({ state }) {
   );
 }
 
+function HomeBypassCard({ settings, busy, onSave }) {
+  const enabled = Boolean(settings?.homeBypassEnabled);
+
+  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:8080</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 })}
+        />
+      </label>
+    </div>
+  );
+}
+
 function ClientFlow({ state, activeServer }) {
+  const homeBypass = Boolean(state?.clientSettings?.homeBypassEnabled);
   const steps = [
     { label: 'Mac', value: 'приложения' },
     { label: 'Локальный proxy', value: `127.0.0.1:${state?.proxyPort || 8080}` },
-    { label: 'VPN-сервер', value: activeServer?.tag || state?.selectedTag || 'не выбран' },
-    { label: 'Интернет', value: state?.singboxRunning ? 'через VPN' : 'ожидает' },
+    { label: homeBypass ? 'Домашняя сеть' : 'VPN-сервер', value: homeBypass ? 'напрямую' : activeServer?.tag || state?.selectedTag || 'не выбран' },
+    { label: 'Интернет', value: state?.singboxRunning ? homeBypass ? 'без VPN' : 'через VPN' : 'ожидает' },
   ];
 
   return (
@@ -222,6 +266,8 @@ export function ClientOverviewPage({
   servers,
   pendingTag,
   setPendingTag,
+  clientSettings,
+  onSaveClientSettings,
   onFetchSubscription,
   onApply,
   onRestart,
@@ -243,6 +289,9 @@ export function ClientOverviewPage({
       />
       <div className="grid-2">
         <ProxyCard state={state} />
+        <HomeBypassCard settings={clientSettings} busy={busy} onSave={onSaveClientSettings} />
+      </div>
+      <div className="grid-2">
         <ClientActions
           state={state}
           busy={busy}