feat(web): палитра команд Ctrl/Cmd+K и подтверждение выхода с несохранёнными правками
Два требования desktop-клиента (docs/client-tauri.md §5), которые живут в веб-слое — том же, что и в браузере: - **Палитра команд.** Ctrl/Cmd+K (на документе или сообщением `openPalette` от обёртки) открывает быстрый переход: серверы (в первую доступную комнату), комнаты выбранного сервера с группировкой по категориям, личные беседы из уже загруженного снапшота, действия (настройки профиля/безопасности/внешнего вида, настройки сервера, создание сервера, друзья, микрофон и «не слышу» при активной голосовой сессии). Новых запросов палитра не делает; поиск по подстроке без учёта регистра, 8 пунктов на раздел, стрелки со `scrollIntoView`, `role=listbox/option` и `aria-activedescendant`; - **Подтверждение выхода.** Формы с локальным черновиком регистрируются в общем реестре (`stores/unsaved.ts` + хук `useUnsavedChanges`): платформа получает один `setDirty` на переход «есть правки / нет правок», а на сообщение обёртки `closeRequested` клиент отвечает тряской контента и диалогом «Сохранить / Выйти без сохранения». При `prefers-reduced-motion: reduce` тряску заменяет подсветка рамки; в браузере вместо сообщения обёртки работает штатный `beforeunload`. Хук добавлен в формы с явной кнопкой «Сохранить»: профиль, общие настройки сервера, ник, эмодзи, звуки, оформление, вебхуки, лимиты инстанса, переименование сервера (автосохраняемые переключатели намеренно не помечаются); - Deep link `glchat://dm/<channelId>` (личная беседа без сервера) — его присылает обёртка при клике по уведомлению о личном сообщении. Тесты: 525 passed (501 база + 24 новых) — палитра, реестр правок, диалог закрытия, `beforeunload`, разбор ссылок; `npm run check` и `npm run lint` зелёные.
This commit is contained in:
@@ -1,4 +1,11 @@
|
||||
import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';
|
||||
import {
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
type CSSProperties,
|
||||
type ReactNode,
|
||||
type RefObject,
|
||||
} from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
@@ -28,6 +35,11 @@ interface ModalProps {
|
||||
* `overflow` и трансформациям родителей.
|
||||
*/
|
||||
portal?: boolean;
|
||||
/**
|
||||
* Куда поставить фокус при открытии. По умолчанию — первое поле панели;
|
||||
* палитре команд нужен именно поиск, а не крестик в шапке (он тоже кнопка).
|
||||
*/
|
||||
initialFocusRef?: RefObject<HTMLElement | null>;
|
||||
}
|
||||
|
||||
/** Длительность анимации закрытия: столько панель живёт в DOM после `open=false`. */
|
||||
@@ -63,6 +75,7 @@ export function Modal({
|
||||
panelStyle,
|
||||
bodyClassName = '',
|
||||
portal = false,
|
||||
initialFocusRef,
|
||||
}: ModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const panelRef = useRef<HTMLDivElement | null>(null);
|
||||
@@ -115,10 +128,10 @@ export function Modal({
|
||||
};
|
||||
document.addEventListener('keydown', onKeyDown);
|
||||
const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
|
||||
const firstField = panelRef.current?.querySelector<HTMLElement>(
|
||||
'input, textarea, select, button',
|
||||
);
|
||||
firstField?.focus();
|
||||
const target =
|
||||
initialFocusRef?.current ??
|
||||
panelRef.current?.querySelector<HTMLElement>('input, textarea, select, button');
|
||||
target?.focus();
|
||||
return () => {
|
||||
document.removeEventListener('keydown', onKeyDown);
|
||||
const index = openModals.indexOf(token);
|
||||
@@ -128,7 +141,7 @@ export function Modal({
|
||||
// Возвращаем фокус туда, откуда окно открыли.
|
||||
previous?.focus();
|
||||
};
|
||||
}, [open]);
|
||||
}, [open, initialFocusRef]);
|
||||
|
||||
if (!mounted) {
|
||||
return null;
|
||||
|
||||
Reference in New Issue
Block a user