feat: improve macos client proxy setup

src/web/components/ClientOverviewPage.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { flagFor } from '../utils/country.js';
 import { formatBytes, formatRelative } from '../utils/format.js';
 
@@ -166,8 +166,21 @@ function ClientSetup({
   );
 }
 
-function ProxyCard({ state }) {
-  const port = state?.proxyPort || 8080;
+function ProxyCard({ 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));
+
+  useEffect(() => {
+    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}`,
@@ -179,6 +192,29 @@ function ProxyCard({ state }) {
         <h2>Локальный proxy</h2>
         <span className="badge info">127.0.0.1:{port}</span>
       </div>
+      <div className="field" style={{ marginBottom: 12 }}>
+        <label className="field-label">Порт proxy</label>
+        <div className="subscription-input">
+          <input
+            className="input"
+            type="number"
+            min={range.start}
+            max={range.end}
+            value={draftPort}
+            onChange={(e) => setDraftPort(e.target.value)}
+          />
+          <button
+            className="btn btn-secondary"
+            disabled={busy || !portDirty}
+            onClick={() => onSave({ ...settings, proxyPort: parsedDraftPort })}
+          >
+            Сохранить
+          </button>
+        </div>
+        <small className={portInvalid ? '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} />
@@ -187,8 +223,9 @@ function ProxyCard({ state }) {
   );
 }
 
-function HomeBypassCard({ settings, busy, onSave }) {
+function HomeBypassCard({ state, settings, busy, onSave }) {
   const enabled = Boolean(settings?.homeBypassEnabled);
+  const port = settings?.proxyPort || state?.proxyPort || 8080;
 
   return (
     <div className="card">
@@ -199,7 +236,7 @@ function HomeBypassCard({ settings, busy, onSave }) {
         </span>
       </div>
       <p className="muted">
-        Включайте дома: приложения продолжают использовать <code>127.0.0.1:8080</code>, но VPN не используется.
+        Включайте дома: приложения продолжают использовать <code>127.0.0.1:{port}</code>, но VPN не используется.
       </p>
       <label className="switch-row">
         <span>
@@ -288,8 +325,13 @@ export function ClientOverviewPage({
         onApply={onApply}
       />
       <div className="grid-2">
-        <ProxyCard state={state} />
-        <HomeBypassCard settings={clientSettings} busy={busy} onSave={onSaveClientSettings} />
+        <ProxyCard
+          state={state}
+          settings={clientSettings}
+          busy={busy}
+          onSave={onSaveClientSettings}
+        />
+        <HomeBypassCard state={state} settings={clientSettings} busy={busy} onSave={onSaveClientSettings} />
       </div>
       <div className="grid-2">
         <ClientActions