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:
2026-09-22 23:17:32 +03:00
parent 72c5189e8f
commit 085454d555
26 changed files with 1818 additions and 34 deletions
@@ -11,6 +11,7 @@ import {
import { ErrorNotice } from '@/components/ui/ErrorNotice';
import { Field } from '@/components/ui/Field';
import { Button } from '@/components/ui/primitives';
import { useUnsavedChanges } from '@/lib/unsavedChanges';
import type { InstanceGuild } from '@/api/types';
interface InstanceGuildsPanelProps {
@@ -65,6 +66,17 @@ export function InstanceGuildsPanel({
onError: (cause: unknown) => setActionError(cause),
});
// Незаконченное переименование сервера: черновик живёт в поле, пока форма открыта.
useUnsavedChanges({
dirty: renaming !== null && name.trim() !== '' && name.trim() !== renaming.name,
save: async () => {
if (renaming === null || name.trim() === '') {
return;
}
await rename.mutateAsync({ id: renaming.id, name: name.trim() });
},
});
const pending = rename.isPending || remove.isPending;
if (isPending) {
@@ -6,6 +6,7 @@ import { updateInstanceSettings, type InstanceSettings } from '@/api/instance';
import { ErrorNotice } from '@/components/ui/ErrorNotice';
import { Field } from '@/components/ui/Field';
import { Button } from '@/components/ui/primitives';
import { useUnsavedChanges } from '@/lib/unsavedChanges';
interface InstanceLimitsPanelProps {
settings: InstanceSettings;
@@ -67,7 +68,11 @@ export function InstanceLimitsPanel({ settings, onSaved }: InstanceLimitsPanelPr
},
});
const onSubmit = (): void => {
/**
* Разбор формы: либо патч для сервера, либо текст локальной проверки.
* Общий и для кнопки «Сохранить», и для диалога закрытия окна.
*/
const buildPatch = (): { patch: Partial<InstanceSettings> | null; error: string | null } => {
const sizes = {
max_avatar_size: mbToBytes(form.avatar),
max_guild_image_size: mbToBytes(form.guildImage),
@@ -76,32 +81,63 @@ export function InstanceLimitsPanel({ settings, onSaved }: InstanceLimitsPanelPr
max_cosmetic_size: mbToBytes(form.cosmetic),
};
if (Object.values(sizes).some((value) => value === null)) {
setError(t('settings.instance.limits.invalidSize'));
return;
return { patch: null, error: t('settings.instance.limits.invalidSize') };
}
const guilds = Number(form.guilds);
const members = Number(form.members);
const message = Number(form.message);
if (!Number.isFinite(guilds) || !Number.isFinite(members) || !Number.isFinite(message)) {
setError(t('settings.instance.limits.invalidNumber'));
return;
return { patch: null, error: t('settings.instance.limits.invalidNumber') };
}
setError(null);
// Размеры проверены выше: null уже отсеян, здесь только числа.
save.mutate({
registration_enabled: form.registration,
allow_guild_creation: form.creation,
max_guilds_per_user: guilds,
max_members_per_guild: members,
max_message_length: message,
max_avatar_size: sizes.max_avatar_size ?? settings.max_avatar_size,
max_guild_image_size: sizes.max_guild_image_size ?? settings.max_guild_image_size,
max_emoji_size: sizes.max_emoji_size ?? settings.max_emoji_size,
max_sound_size: sizes.max_sound_size ?? settings.max_sound_size,
max_cosmetic_size: sizes.max_cosmetic_size ?? settings.max_cosmetic_size,
});
return {
patch: {
registration_enabled: form.registration,
allow_guild_creation: form.creation,
max_guilds_per_user: guilds,
max_members_per_guild: members,
max_message_length: message,
// Размеры проверены выше: null уже отсеян, здесь только числа.
max_avatar_size: sizes.max_avatar_size ?? settings.max_avatar_size,
max_guild_image_size: sizes.max_guild_image_size ?? settings.max_guild_image_size,
max_emoji_size: sizes.max_emoji_size ?? settings.max_emoji_size,
max_sound_size: sizes.max_sound_size ?? settings.max_sound_size,
max_cosmetic_size: sizes.max_cosmetic_size ?? settings.max_cosmetic_size,
},
error: null,
};
};
const onSubmit = (): void => {
const { patch, error: message } = buildPatch();
setError(message);
if (patch !== null) {
save.mutate(patch);
}
};
// Черновик лимитов: сравниваем введённое с тем, что уже сохранено на сервере.
useUnsavedChanges({
dirty:
form.registration !== settings.registration_enabled ||
form.creation !== settings.allow_guild_creation ||
form.guilds !== String(settings.max_guilds_per_user) ||
form.members !== String(settings.max_members_per_guild) ||
form.message !== String(settings.max_message_length) ||
form.avatar !== bytesToMb(settings.max_avatar_size) ||
form.guildImage !== bytesToMb(settings.max_guild_image_size) ||
form.emoji !== bytesToMb(settings.max_emoji_size) ||
form.sound !== bytesToMb(settings.max_sound_size) ||
form.cosmetic !== bytesToMb(settings.max_cosmetic_size),
save: async () => {
const { patch, error: message } = buildPatch();
if (patch === null) {
// Локальная проверка не прошла: диалог покажет текст, окно останется.
throw new Error(message ?? t('settings.instance.limits.invalidNumber'));
}
await save.mutateAsync(patch);
},
});
return (
<form
className="mt-3 flex flex-col gap-4"