Refactor server picker and limit ping requests

2026-07-12 13:42:22 +03:00
parent 24fda3e34e
commit 57330f1c78
10 changed files with 612 additions and 83 deletions
--- a/src/web/api.js
+++ b/src/web/api.js
@@ -79,6 +79,9 @@ export const api = {
    restart: () => request('/api/singbox/restart', { method: 'POST' }),
  },
  servers: {
-    pingAll: () => request('/api/servers/ping-all', { method: 'POST' }),
+    ping: (serverIds) => request('/api/servers/ping-all', {
+      method: 'POST',
+      body: JSON.stringify({ serverIds }),
+    }),
  },
 };
--- a/src/web/components/ClientOverviewPage.jsx
+++ b/src/web/components/ClientOverviewPage.jsx
@@ -16,6 +16,7 @@ import { formatBytes } from '../utils/format.js';
 import { instructionBlocks } from '../instructions.js';
 import { operationBlocked } from '../state/operations.js';
 import { ConfirmationPopup } from './ConfirmationPopup.jsx';
+import { ServerPicker } from './ServerPicker.jsx';
 import { canAppendRouteRule } from '../../shared/routingRules.js';
 import {
  HARBOR_VERSIONS,
@@ -623,7 +624,6 @@ export function ClientOverviewPage({
  const [editingSubscription, setEditingSubscription] = useState(!state?.hasSubscription);
  const [showIntro, setShowIntro] = useState(!hasSubscription);
  const [subscriptionContentReady, setSubscriptionContentReady] = useState(hasSubscription);
-  const [pings, setPings] = useState({});
  const [accessTab, setAccessTab] = useState('gateway');
  const [copyFeedback, setCopyFeedback] = useState(null);
  const [refreshingInfo, setRefreshingInfo] = useState(false);
@@ -648,7 +648,6 @@ export function ClientOverviewPage({
  const localRulesCloseRef = useRef(null);
  const localRulesBaselineRef = useRef('[]');
  const previousHasSubscriptionRef = useRef(hasSubscription);
-  const serverKey = servers.map((server) => server.id).join('|');
  const gatewayAddress = isGateway ? window.location.hostname : '127.0.0.1';
  const proxyUrls = localProxyUrls(state?.proxyPort, gatewayAddress);
  const usage = subscriptionUsage(state?.userInfo);
@@ -695,31 +694,6 @@ export function ClientOverviewPage({
    return () => clearInterval(timer);
  }, [connected, state?.singboxStartedAt]);

-  useEffect(() => {
-    if (!servers.length) {
-      setPings({});
-      return undefined;
-    }
-
-    let cancelled = false;
-    setPings(Object.fromEntries(servers.map((server) => [server.id, { checking: true }])));
-    api.servers.pingAll()
-      .then((data) => {
-        if (cancelled) return;
-        setPings(Object.fromEntries((data.results || []).map((ping) => [
-          ping.id || ping.tag,
-          ping,
-        ])));
-      })
-      .catch(() => {
-        if (!cancelled) {
-          setPings(Object.fromEntries(servers.map((server) => [server.id, { ok: false }])));
-        }
-      });
-
-    return () => { cancelled = true; };
-  }, [serverKey]);
-
  useEffect(() => {
    if (editingSubscription) subscriptionInputRef.current?.focus();
  }, [editingSubscription]);
@@ -916,7 +890,7 @@ export function ClientOverviewPage({
      requestAnimationFrame(() => setUsageUpdated(true));
      setTimeout(() => setUsageUpdated(false), 900);
      setServersLeaving(true);
-      await new Promise((resolve) => setTimeout(resolve, 420 + Math.max(0, servers.length - 1) * 90));
+      await new Promise((resolve) => setTimeout(resolve, 420 + Math.min(7, Math.max(0, servers.length - 1)) * 90));
      setServerRevealVersion((version) => version + 1);
      setServersLeaving(false);
    } finally {
@@ -1376,40 +1350,15 @@ export function ClientOverviewPage({
          )}

          {hasSubscription && subscriptionContentReady && (
-          <section className="client-servers" aria-label="Выберите сервер">
-            {!showPower && <span className="client-server-prompt">Выберите сервер</span>}
-            <div
-              className={`client-server-grid${serversLeaving ? ' is-leaving' : ''}`}
-              key={`${serverKey}:${serverRevealVersion}`}
-            >
-              {servers.map((server, index) => {
-                const ping = pings[server.id];
-                const selected = server.id === selectedServerId;
-                const pingText = ping?.checking
-                  ? 'Проверка…'
-                  : ping?.ok ? `${ping.latency} ms` : 'Недоступен';
-                const pingClass = ping?.ok
-                  ? ping.latency < 100 ? 'good' : ping.latency < 250 ? 'medium' : 'slow'
-                  : '';
-
-                return (
-                  <button
-                    className={`client-server ${selected ? 'is-selected' : ''}`}
-                    type="button"
-                    key={server.id}
-                    disabled={serverApplyBlocked}
-                    aria-pressed={selected}
-                    aria-label={`${server.label}, ${server.host}:${server.port}, ${pingText}`}
-                    style={{ '--server-index': index }}
-                    onClick={() => selectServer(server.id)}
-                  >
-                    <strong>{server.label}</strong>
-                    <small className={pingClass}>{pingText}</small>
-                  </button>
-                );
-              })}
-            </div>
-          </section>
+          <ServerPicker
+            servers={servers}
+            selectedServerId={selectedServerId}
+            disabled={serverApplyBlocked}
+            prompt={!showPower}
+            leaving={serversLeaving}
+            revealVersion={serverRevealVersion}
+            onSelect={selectServer}
+          />
          )}
          </div>
        </div>
--- a/src/web/components/ServerPicker.jsx
+++ b/src/web/components/ServerPicker.jsx
@@ -0,0 +1,257 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { api } from '../api.js';
+import {
+  autoServer,
+  filterServers,
+  groupServers,
+  SERVER_RESULT_WINDOW,
+} from '../utils/serverPicker.js';
+
+const FAVORITES_KEY = 'harbor-server-favorites';
+const RECENT_KEY = 'harbor-server-recent';
+const AUTO_KEY = 'harbor-server-auto';
+
+function readList(key) {
+  try {
+    const value = JSON.parse(localStorage.getItem(key) || '[]');
+    return Array.isArray(value) ? value.map(String) : [];
+  } catch {
+    return [];
+  }
+}
+
+function write(key, value) {
+  try {
+    localStorage.setItem(key, typeof value === 'string' ? value : JSON.stringify(value));
+  } catch {
+    // Preferences remain available for this session.
+  }
+}
+
+function readAuto() {
+  try {
+    return localStorage.getItem(AUTO_KEY) === 'true';
+  } catch {
+    return false;
+  }
+}
+
+function ServerRow({ server, selected, favorite, ping, disabled, index, onSelect, onFavorite }) {
+  const health = ping?.checking
+    ? 'Проверяем TCP…'
+    : ping?.error ? 'Проверка недоступна'
+      : ping?.ok ? `TCP ${ping.latency} мс` : ping ? 'TCP недоступен' : 'Не проверен';
+
+  return <div className={`client-server-row${selected ? ' is-selected' : ''}${onFavorite ? ' has-favorite' : ''}`}>
+    <button
+      className={`client-server${selected ? ' is-selected' : ''}`}
+      type="button"
+      disabled={disabled}
+      aria-pressed={selected}
+      aria-label={`${server.label}, ${server.host}:${server.port}, ${health}`}
+      style={{ '--server-index': Math.min(index, 7) }}
+      onClick={() => onSelect(server.id)}
+    >
+      <strong>{server.label}</strong>
+      <small title={ping?.checkedAt || undefined}>{health}</small>
+    </button>
+    {onFavorite && <button
+      className={`client-server-favorite${favorite ? ' is-active' : ''}`}
+      type="button"
+      aria-pressed={favorite}
+      aria-label={`${favorite ? 'Убрать из избранного' : 'Добавить в избранное'}: ${server.label}`}
+      onClick={() => onFavorite(server.id)}
+    >★</button>}
+  </div>;
+}
+
+export function ServerPicker({
+  servers,
+  selectedServerId,
+  disabled,
+  prompt,
+  leaving,
+  revealVersion,
+  onSelect,
+}) {
+  const [query, setQuery] = useState('');
+  const [view, setView] = useState('all');
+  const [page, setPage] = useState(0);
+  const [favorites, setFavorites] = useState(() => readList(FAVORITES_KEY));
+  const [recent, setRecent] = useState(() => readList(RECENT_KEY));
+  const [autoActive, setAutoActive] = useState(readAuto);
+  const [collapsed, setCollapsed] = useState([]);
+  const [pings, setPings] = useState({});
+  const [checking, setChecking] = useState(false);
+  const serverKey = servers.map(({ id }) => id).join('|');
+
+  useEffect(() => {
+    setPage(0);
+  }, [query, view, serverKey]);
+
+  const selected = servers.find(({ id }) => id === selectedServerId);
+  const filtered = useMemo(() => {
+    const found = filterServers(servers, query);
+    if (view === 'favorites') return found.filter(({ id }) => favorites.includes(id));
+    if (view === 'recent') return recent.flatMap((id) => found.find((server) => server.id === id) || []);
+    return found;
+  }, [servers, query, view, favorites, recent]);
+  const results = filtered.filter(({ id }) => id !== selectedServerId);
+  const pageCount = Math.max(1, Math.ceil(results.length / SERVER_RESULT_WINDOW));
+  const visible = results.slice(page * SERVER_RESULT_WINDOW, (page + 1) * SERVER_RESULT_WINDOW);
+  const grouped = servers.length >= 10;
+
+  useEffect(() => {
+    setPage((current) => Math.min(current, pageCount - 1));
+  }, [pageCount]);
+
+  function toggleFavorite(id) {
+    setFavorites((current) => {
+      const next = current.includes(id) ? current.filter((item) => item !== id) : [id, ...current];
+      write(FAVORITES_KEY, next);
+      return next;
+    });
+  }
+
+  function select(id, automatic = false) {
+    setAutoActive(automatic);
+    write(AUTO_KEY, String(automatic));
+    if (!automatic) {
+      setRecent((current) => {
+        const next = [id, ...current.filter((item) => item !== id)].slice(0, 5);
+        write(RECENT_KEY, next);
+        return next;
+      });
+    }
+    onSelect(id);
+  }
+
+  async function checkVisible() {
+    const ids = [...new Set([selectedServerId, ...visible.map(({ id }) => id)].filter(Boolean))].slice(0, 30);
+    if (!ids.length) return;
+    setChecking(true);
+    setPings((current) => ({
+      ...current,
+      ...Object.fromEntries(ids.map((id) => [id, { checking: true }])),
+    }));
+    try {
+      const data = await api.servers.ping(ids);
+      setPings((current) => ({
+        ...current,
+        ...Object.fromEntries((data.results || []).map((result) => [result.id, result])),
+      }));
+    } catch {
+      setPings((current) => ({
+        ...current,
+        ...Object.fromEntries(ids.map((id) => [id, { error: true, checkedAt: new Date().toISOString() }])),
+      }));
+    } finally {
+      setChecking(false);
+    }
+  }
+
+  if (servers.length === 1) {
+    return <section className="client-servers" aria-label="Выберите сервер">
+      {prompt && <span className="client-server-prompt">Выберите сервер</span>}
+      <div className="client-server-grid">
+        <ServerRow
+          server={servers[0]}
+          selected={servers[0].id === selectedServerId}
+          favorite={false}
+          disabled={disabled}
+          index={0}
+          onSelect={onSelect}
+        />
+      </div>
+    </section>;
+  }
+
+  const renderRows = (items, offset = 0) => items.map((server, index) => (
+    <ServerRow
+      key={server.id}
+      server={server}
+      selected={!autoActive && server.id === selectedServerId}
+      favorite={favorites.includes(server.id)}
+      ping={pings[server.id]}
+      disabled={disabled}
+      index={offset + index}
+      onSelect={select}
+      onFavorite={toggleFavorite}
+    />
+  ));
+
+  return <section className="client-servers is-scalable" aria-label="Выберите сервер">
+    {prompt && <span className="client-server-prompt">Выберите сервер</span>}
+    <div className="client-server-tools">
+      <input
+        type="search"
+        value={query}
+        aria-label="Найти сервер"
+        placeholder="Поиск сервера"
+        onChange={(event) => setQuery(event.target.value)}
+      />
+      <div className="client-server-filters" aria-label="Фильтр серверов">
+        {[
+          ['all', 'Все'],
+          ['favorites', '★'],
+          ['recent', 'Недавние'],
+        ].map(([id, label]) => <button
+          type="button"
+          className={view === id ? 'is-active' : ''}
+          aria-pressed={view === id}
+          key={id}
+          onClick={() => setView(id)}
+        >{label}</button>)}
+        <button type="button" disabled={checking || !visible.length} onClick={checkVisible}>
+          {checking ? 'Проверяем…' : 'Проверить TCP'}
+        </button>
+      </div>
+    </div>
+
+    <div className="client-server-pinned">
+      <button
+        className={`client-server-auto${autoActive ? ' is-selected' : ''}`}
+        type="button"
+        aria-pressed={autoActive}
+        disabled={disabled || !servers.length}
+        onClick={() => select(autoServer(servers)?.id, true)}
+      >
+        <strong>Auto</strong>
+        <small>Первый стабильный сервер</small>
+      </button>
+      {selected && !autoActive && <ServerRow
+        server={selected}
+        selected
+        favorite={favorites.includes(selected.id)}
+        ping={pings[selected.id]}
+        disabled={disabled}
+        index={0}
+        onSelect={select}
+        onFavorite={toggleFavorite}
+      />}
+    </div>
+
+    <div className={`client-server-scroll${leaving ? ' is-leaving' : ''}`} key={`${serverKey}:${revealVersion}`}>
+      {!visible.length && <p className="client-server-empty">Серверы не найдены</p>}
+      {grouped ? groupServers(visible).map(([group, items]) => {
+        const isCollapsed = collapsed.includes(group);
+        return <section className="client-server-group" key={group}>
+          <button
+            className="client-server-group-toggle"
+            type="button"
+            aria-expanded={!isCollapsed}
+            onClick={() => setCollapsed((current) => current.includes(group)
+              ? current.filter((item) => item !== group)
+              : [...current, group])}
+          >{group} <small>{items.length}</small></button>
+          {!isCollapsed && <div className="client-server-grid">{renderRows(items)}</div>}
+        </section>;
+      }) : <div className="client-server-grid">{renderRows(visible)}</div>}
+      {pageCount > 1 && <nav className="client-server-pages" aria-label="Страницы серверов">
+        <button className="client-server-more" type="button" disabled={page === 0} onClick={() => setPage((current) => current - 1)}>Назад</button>
+        <span>{page + 1} / {pageCount}</span>
+        <button className="client-server-more" type="button" disabled={page + 1 === pageCount} onClick={() => setPage((current) => current + 1)}>Дальше</button>
+      </nav>}
+    </div>
+  </section>;
+}
--- a/src/web/styles.css
+++ b/src/web/styles.css
@@ -2638,14 +2638,6 @@ p {
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
 }

-.client-server-grid.is-leaving {
-  pointer-events: none;
-}
-
-.client-server-grid.is-leaving .client-server {
-  animation: client-server-leave 420ms calc(var(--server-index) * 90ms) cubic-bezier(0.4, 0, 1, 1) forwards;
-}
-
@keyframes client-server-leave {
  0% {
    opacity: 1;
@@ -2703,9 +2695,192 @@ p {
  text-align: center;
 }

-.client-server small.good { color: var(--client-accent); }
-.client-server small.medium { color: oklch(0.72 0.12 80); }
-.client-server small.slow { color: oklch(0.65 0.16 30); }
+.client-servers.is-scalable {
+  width: min(100%, 360px);
+  margin-inline: auto;
+}
+
+.client-server-tools {
+  display: grid;
+  gap: 9px;
+  margin-bottom: 14px;
+}
+
+.client-server-tools input {
+  width: 100%;
+  height: 36px;
+  padding: 0 4px;
+  border: 0;
+  border-bottom: 1px solid var(--client-border);
+  outline: 0;
+  background: transparent;
+  color: var(--client-text);
+  font: 500 11px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+}
+
+.client-server-tools input:focus {
+  border-bottom-color: var(--client-accent);
+}
+
+.client-server-filters {
+  display: flex;
+  justify-content: center;
+  gap: 5px;
+  flex-wrap: wrap;
+}
+
+.client-server-filters button,
+.client-server-group-toggle,
+.client-server-more {
+  min-height: 30px;
+  padding: 5px 7px;
+  border: 0;
+  background: transparent;
+  color: var(--client-muted);
+  font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  cursor: pointer;
+}
+
+.client-server-filters button.is-active,
+.client-server-filters button:hover:not(:disabled),
+.client-server-group-toggle:hover,
+.client-server-more:hover {
+  color: var(--client-accent);
+}
+
+.client-server-filters button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.client-server-pinned {
+  display: grid;
+  gap: 7px;
+  margin-bottom: 10px;
+}
+
+.client-server-auto {
+  min-height: 44px;
+  display: grid;
+  place-items: center;
+  gap: 3px;
+  padding: 6px;
+  border: 0;
+  border-bottom: 1px solid var(--client-border);
+  background: transparent;
+  color: var(--client-text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.client-server-auto.is-selected {
+  border-bottom: 2px solid var(--client-accent);
+}
+
+.client-server-auto strong {
+  font-size: 11px;
+}
+
+.client-server-auto small {
+  color: var(--client-muted);
+  font-size: 9px;
+}
+
+.client-server-scroll {
+  max-height: 330px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-right: 5px;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in oklch, var(--client-accent) 36%, transparent) transparent;
+}
+
+.client-server-scroll.is-leaving {
+  pointer-events: none;
+}
+
+.client-server-scroll.is-leaving .client-server {
+  animation: client-server-leave 420ms calc(var(--server-index) * 45ms) cubic-bezier(0.4, 0, 1, 1) forwards;
+}
+
+.client-server-group + .client-server-group {
+  margin-top: 8px;
+}
+
+.client-server-group-toggle {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  text-align: left;
+  text-transform: uppercase;
+}
+
+.client-server-group-toggle small {
+  font-size: 9px;
+}
+
+.client-servers.is-scalable .client-server-grid {
+  width: 100%;
+  gap: 5px;
+}
+
+.client-server-row.has-favorite {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 38px;
+  align-items: center;
+}
+
+.client-server-row .client-server {
+  width: 100%;
+}
+
+.client-server-favorite {
+  width: 38px;
+  height: 44px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--client-border);
+  cursor: pointer;
+}
+
+.client-server-favorite.is-active {
+  color: var(--client-accent);
+}
+
+.client-server-empty {
+  padding: 24px 4px;
+  color: var(--client-muted);
+  font-size: 10px;
+  text-align: center;
+}
+
+.client-server-more {
+  margin-top: 8px;
+}
+
+.client-server-pages {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: var(--client-muted);
+  font-size: 9px;
+}
+
+.client-server-more:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.client-server-filters button:focus-visible,
+.client-server-group-toggle:focus-visible,
+.client-server-more:focus-visible,
+.client-server-auto:focus-visible,
+.client-server-favorite:focus-visible {
+  outline: 2px solid var(--client-accent);
+  outline-offset: 1px;
+}

 .client-server:disabled {
  cursor: wait;
@@ -3104,6 +3279,13 @@ p {
    font-size: 10px;
  }

+  .client-server-filters button,
+  .client-server-group-toggle,
+  .client-server-more,
+  .client-server-favorite {
+    min-height: 44px;
+  }
+
  .client-local-rule {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }
@@ -3192,6 +3374,10 @@ p {
  .client-usage,
  .client-usage > strong,
  .client-server,
+  .client-server-auto,
+  .client-server-favorite,
+  .client-server-group-toggle,
+  .client-server-more,
  .client-copy-button,
  .client-access-tab,
  .client-access-point,
--- a/src/web/utils/serverPicker.js
+++ b/src/web/utils/serverPicker.js
@@ -0,0 +1,31 @@
+export const SERVER_RESULT_WINDOW = 60;
+
+const searchable = (server) => [
+  server.label,
+  server.host,
+  server.country,
+  server.city,
+  server.provider,
+  server.protocol,
+].filter(Boolean).join(' ').toLocaleLowerCase('ru');
+
+export function filterServers(servers, query) {
+  const needle = String(query || '').trim().toLocaleLowerCase('ru');
+  return needle ? servers.filter((server) => searchable(server).includes(needle)) : servers;
+}
+
+export function serverGroup(server) {
+  return server.country || server.provider || 'Другие';
+}
+
+export function groupServers(servers) {
+  return [...servers.reduce((groups, server) => {
+    const name = serverGroup(server);
+    groups.set(name, [...(groups.get(name) || []), server]);
+    return groups;
+  }, new Map())];
+}
+
+export function autoServer(servers) {
+  return [...servers].sort((left, right) => left.id.localeCompare(right.id))[0] || null;
+}