UI: доводка выпадашек игроков — без пустых вариантов, фон как у select, быстрее отклик
Из списков убраны варианты-плейсхолдеры («— игрок —» в выборе игрока, «— фракция —» в выборе фракции — disabled+hidden, в закрытом виде текст остаётся). Фон .suggest-list — surface-2, как у input/select; hover строк — --border. Скорость: дебаунс поиска 250→100 мс, в инвайте показанный список дофильтровывается по вводу на клиенте, не дожидаясь ответа сервера; touch-action: manipulation на строках и триггере. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user