From 8a2b53d0b285784df3ca7c5330af04bf9d928f45 Mon Sep 17 00:00:00 2001
From: NotBigGhost <ivan@arseniev.info>
Date: Sat, 18 Jul 2026 03:13:05 +0300
Subject: [PATCH] =?UTF-8?q?UI:=20=D0=B4=D0=BE=D0=B2=D0=BE=D0=B4=D0=BA?=
 =?UTF-8?q?=D0=B0=20=D0=B2=D1=8B=D0=BF=D0=B0=D0=B4=D0=B0=D1=88=D0=B5=D0=BA?=
 =?UTF-8?q?=20=D0=B8=D0=B3=D1=80=D0=BE=D0=BA=D0=BE=D0=B2=20=E2=80=94=20?=
 =?UTF-8?q?=D0=B1=D0=B5=D0=B7=20=D0=BF=D1=83=D1=81=D1=82=D1=8B=D1=85=20?=
 =?UTF-8?q?=D0=B2=D0=B0=D1=80=D0=B8=D0=B0=D0=BD=D1=82=D0=BE=D0=B2,=20?=
 =?UTF-8?q?=D1=84=D0=BE=D0=BD=20=D0=BA=D0=B0=D0=BA=20=D1=83=20select,=20?=
 =?UTF-8?q?=D0=B1=D1=8B=D1=81=D1=82=D1=80=D0=B5=D0=B5=20=D0=BE=D1=82=D0=BA?=
 =?UTF-8?q?=D0=BB=D0=B8=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Из списков убраны варианты-плейсхолдеры («— игрок —» в выборе игрока,
«— фракция —» в выборе фракции — disabled+hidden, в закрытом виде текст
остаётся). Фон .suggest-list — surface-2, как у input/select; hover строк —
--border. Скорость: дебаунс поиска 250→100 мс, в инвайте показанный список
дофильтровывается по вводу на клиенте, не дожидаясь ответа сервера;
touch-action: manipulation на строках и триггере.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/components/PlayerSelect.tsx      | 10 +---------
 frontend/src/components/PlayerSuggestions.tsx | 17 +----------------
 frontend/src/hooks/users.ts                   |  5 +++--
 frontend/src/pages/CreateMatchPage.tsx        |  6 +++++-
 frontend/src/pages/GroupPage.tsx              |  7 ++++++-
 frontend/src/styles/global.css                |  7 ++++---
 6 files changed, 20 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/PlayerSelect.tsx b/frontend/src/components/PlayerSelect.tsx
index 8e4afeb..8c9612e 100644
--- a/frontend/src/components/PlayerSelect.tsx
+++ b/frontend/src/components/PlayerSelect.tsx
@@ -16,7 +16,7 @@ export function PlayerSelect({
 }: {
   value: number | "";
   options: PlayerSuggestion[];
-  onPick: (userId: number | "") => void;
+  onPick: (userId: number) => void;
 }) {
   const [open, setOpen] = useState(false);
   const selected = value === "" ? null : options.find((o) => o.user_id === value) ?? null;
@@ -48,14 +48,6 @@ export function PlayerSelect({
             onPick(u.user_id);
             setOpen(false);
           }}
-          onClear={
-            selected
-              ? () => {
-                  onPick("");
-                  setOpen(false);
-                }
-              : undefined
-          }
         />
       )}
     </div>
diff --git a/frontend/src/components/PlayerSuggestions.tsx b/frontend/src/components/PlayerSuggestions.tsx
index 1c165ac..feb078d 100644
--- a/frontend/src/components/PlayerSuggestions.tsx
+++ b/frontend/src/components/PlayerSuggestions.tsx
@@ -14,28 +14,13 @@ export interface PlayerSuggestion {
 export function PlayerSuggestions({
   items,
   onPick,
-  onClear,
 }: {
   items: PlayerSuggestion[];
   onPick: (item: PlayerSuggestion) => void;
-  // Необязательная строка сброса сверху списка («— игрок —» в PlayerSelect).
-  onClear?: () => void;
 }) {
-  if (items.length === 0 && !onClear) return null;
+  if (items.length === 0) return null;
   return (
     <div className="suggest-list" role="listbox">
-      {onClear && (
-        <button
-          type="button"
-          className="suggest-row suggest-clear"
-          onMouseDown={(e) => {
-            e.preventDefault();
-            onClear();
-          }}
-        >
-          — игрок —
-        </button>
-      )}
       {items.map((u) => (
         <button
           key={u.user_id}
diff --git a/frontend/src/hooks/users.ts b/frontend/src/hooks/users.ts
index b52cf1b..191a328 100644
--- a/frontend/src/hooks/users.ts
+++ b/frontend/src/hooks/users.ts
@@ -4,8 +4,9 @@ import { useEffect, useState } from "react";
 import { api, unwrap } from "../api/client";
 import { qk } from "../api/queryKeys";
 
-/** Значение с задержкой: не дёргаем поиск на каждый введённый символ. */
-function useDebounced<T>(value: T, ms = 250): T {
+/** Значение с задержкой: не дёргаем поиск на каждый введённый символ.
+ *  100 мс — почти незаметно глазу, но склеивает быструю печать в один запрос. */
+function useDebounced<T>(value: T, ms = 100): T {
   const [debounced, setDebounced] = useState(value);
   useEffect(() => {
     const t = setTimeout(() => setDebounced(value), ms);
diff --git a/frontend/src/pages/CreateMatchPage.tsx b/frontend/src/pages/CreateMatchPage.tsx
index fe8b8cd..128b962 100644
--- a/frontend/src/pages/CreateMatchPage.tsx
+++ b/frontend/src/pages/CreateMatchPage.tsx
@@ -215,7 +215,11 @@ export function CreateMatchPage() {
                 }
                 style={{ flex: 1 }}
               >
-                <option value="">— фракция —</option>
+                {/* disabled+hidden: в закрытом select это плейсхолдер, в раскрытом
+                    списке варианта «— фракция —» нет. */}
+                <option value="" disabled hidden>
+                  — фракция —
+                </option>
                 {(factions ?? []).map((f) => (
                   <option key={f.id} value={f.id}>
                     {f.name_ru}
diff --git a/frontend/src/pages/GroupPage.tsx b/frontend/src/pages/GroupPage.tsx
index d2bce5c..4519f9b 100644
--- a/frontend/src/pages/GroupPage.tsx
+++ b/frontend/src/pages/GroupPage.tsx
@@ -57,8 +57,13 @@ export function GroupPage() {
   };
 
   // Подсказки: уже состоящих в группе не предлагаем, показываем до 3.
+  // Дофильтровка по текущему вводу — на клиенте: пока сервер отвечает на новую
+  // букву, показанный список (keepPreviousData) сужается мгновенно.
   const memberIds = new Set((members ?? []).map((m) => m.user_id));
-  const suggestions = (foundUsers ?? []).filter((u) => !memberIds.has(u.user_id)).slice(0, 3);
+  const needle = newNick.trim().toLowerCase();
+  const suggestions = (foundUsers ?? [])
+    .filter((u) => !memberIds.has(u.user_id) && u.nickname.toLowerCase().includes(needle))
+    .slice(0, 3);
   const showSuggest =
     nickFocused && !nickPicked && newNick.trim().length > 0 && suggestions.length > 0;
 
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index a300f48..705400c 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -296,7 +296,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent); }
   top: calc(100% + 4px);
   left: 0;
   right: 0;
-  background: var(--surface);
+  background: var(--surface-2); /* как у input/select — выпадашка продолжает поле */
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
@@ -317,11 +317,11 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent); }
   font-weight: 600;
   text-align: left;
   cursor: pointer;
+  touch-action: manipulation; /* тап без задержки двойного тапа */
 }
 .suggest-row:last-child { border-bottom: none; }
-.suggest-row:hover, .suggest-row:active { background: var(--surface-2); }
+.suggest-row:hover, .suggest-row:active { background: var(--border); }
 .suggest-row .nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.suggest-clear { color: var(--muted); font-weight: 400; }
 
 /* Кнопка-триггер PlayerSelect: выглядит как select, раскрывает .suggest-list. */
 .picker-trigger {
@@ -339,6 +339,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent); }
   text-align: left;
   cursor: pointer;
   outline: none;
+  touch-action: manipulation;
 }
 .picker-trigger:focus { border-color: var(--accent); }
 .picker-trigger .nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }