feat(web): базовый клиент Фазы 1 — вход, серверы, комнаты, настройки

Клиент React 19 + TanStack Query + Zustand:

- вход (поле TOTP появляется на `auth.2fa_required`), регистрация с проверками
  и учётом `registration_enabled`, онбординг первого входа с возможностью
  пропустить, редирект `/` и страница `/status`;
- защита маршрутов: неавторизованных — на `/login`, без онбординга — на
  `/onboarding`;
- оболочка `/app`: рейка серверов, сайдбар категорий и комнат, шапка сервера,
  панель пользователя, модалки создания сервера и комнаты, экран «нет серверов»
  со вступлением в главный сервер, заглушка комнаты до Фазы 2;
- настройки: профиль, безопасность (step-up, сессии, logout-all, 2FA с
  локальным QR и кодами восстановления), внешний вид, админ-раздел инстанса;
- Gateway-клиент: HELLO/IDENTIFY/RESUME, heartbeat с ожиданием ACK,
  экспоненциальное переподключение, разбор `INVALID_SESSION {reason,resumable}`;
- диспетчер событий: READY/RESUMED/USER_UPDATE/GUILD_UPDATE/GUILD_DELETE/
  CHANNEL_* применяются к стору, GUILD_CREATE догружается по REST,
  MEMBER_*/ROLE_* инвалидируют запросы участников, ролей и карточки сервера;
- i18n ru/en, 66 тестов Vitest, `check`/`lint`/`test`/`build` зелёные.

Серверные правки под клиент:

- `totp_enabled` в профиле (`GET /users/@me`, вход, регистрация) — клиенту
  нужно знать, требовать ли код при step-up;
- `POST /auth/2fa/setup` отдаёт `otpauth_url` и `qr_png` (data-URI): QR-код
  рисуется локально, внешние сервисы генерации QR не используются;
- права в ответах — имена (`VIEW_CHANNEL|SEND_MESSAGES`), клиент сверяет имена.

web/src/stores/gateway.ts

@@ -8,6 +8,14 @@ import {
   type GatewayStatus,
   type GatewayUser,
 } from '@/api/gateway';
+import {
+  parseChannelDelete,
+  parseChannelPayload,
+  parseGuildId,
+  parseGuildUpdate,
+  parseRoleEvent,
+  parseUserUpdate,
+} from '@/api/gatewayEvents';
 import { useSessionStore } from '@/stores/session';
 
 /**
@@ -103,15 +111,81 @@ export function dispatchGatewayEvent(event: GatewayDispatch): void {
       useGatewayStore.setState({ status: 'connected', attempts: 0 });
       return;
     }
-    // Заготовка диспетчера Фазы 2: события приходят, но пока не меняют UI.
-    case 'GUILD_CREATE':
-    case 'GUILD_UPDATE':
-    case 'GUILD_DELETE':
+    case 'USER_UPDATE': {
+      // Профиль текущего пользователя обновился (например, с другого устройства).
+      const update = parseUserUpdate(event.d);
+      if (update !== null) {
+        session.applyUserUpdate(update.user);
+      }
+      return;
+    }
+    case 'GUILD_CREATE': {
+      // В событии только guild_id — перечитываем список серверов по REST.
+      const guildId = parseGuildId(event.d);
+      if (guildId !== null) {
+        void addGuildFromRest(guildId);
+      }
+      return;
+    }
+    case 'GUILD_UPDATE': {
+      const update = parseGuildUpdate(event.d);
+      if (update?.name !== undefined) {
+        session.renameGuild(update.guild_id, update.name);
+      }
+      return;
+    }
+    case 'GUILD_DELETE': {
+      const guildId = parseGuildId(event.d);
+      if (guildId === null) {
+        return;
+      }
+      // removeGuild сам выбирает первый оставшийся сервер (или пустой список).
+      session.removeGuild(guildId);
+      void invalidateGuildQueries(guildId);
+      syncUrlWithSelection();
+      return;
+    }
     case 'CHANNEL_CREATE':
-    case 'CHANNEL_UPDATE':
-    case 'CHANNEL_DELETE':
+    case 'CHANNEL_UPDATE': {
+      const channel = parseChannelPayload(event.d);
+      if (channel === null) {
+        return;
+      }
+      const guildId = channel.guild_id ?? session.selectedGuildId;
+      if (guildId !== null) {
+        session.upsertChannel(guildId, channel);
+      }
+      return;
+    }
+    case 'CHANNEL_DELETE': {
+      const deleted = parseChannelDelete(event.d);
+      if (deleted === null) {
+        return;
+      }
+      session.removeChannel(deleted.guild_id, deleted.channel_id);
+      syncUrlWithSelection();
+      return;
+    }
     case 'MEMBER_UPDATE':
+    case 'MEMBER_REMOVE': {
+      // Роли участника влияют на права: перечитываем участников и карточку сервера.
+      const guildId = parseGuildId(event.d);
+      if (guildId !== null) {
+        void invalidateMembershipQueries(guildId);
+      }
+      return;
+    }
+    case 'ROLE_CREATE':
+    case 'ROLE_UPDATE':
+    case 'ROLE_DELETE': {
+      const role = parseRoleEvent(event.d);
+      if (role !== null) {
+        void invalidateMembershipQueries(role.guild_id);
+      }
+      return;
+    }
     case 'PRESENCE_UPDATE':
+      // Присутствие других участников в Фазе 1 не отображается.
       return;
     default:
       // Неизвестные события игнорируем: контракт может расширяться.
@@ -119,6 +193,74 @@ export function dispatchGatewayEvent(event: GatewayDispatch): void {
   }
 }
 
+/** Сервер появился (создан или найден): забираем сводку из REST. */
+async function addGuildFromRest(guildId: string): Promise<void> {
+  const [{ getQueryClient }, users] = await Promise.all([
+    import('@/lib/queryClient'),
+    import('@/api/users'),
+  ]);
+  const client = getQueryClient();
+  try {
+    const guilds = await client.fetchQuery({
+      queryKey: users.myGuildsQueryKey,
+      queryFn: () => users.fetchMyGuilds(),
+    });
+    const guild = guilds.find((item) => item.id === guildId);
+    if (guild !== undefined) {
+      useSessionStore.getState().upsertGuild(guild);
+    }
+  } catch {
+    // Сеть подвела — просто помечаем данные устаревшими для следующего рендера.
+    await client.invalidateQueries({ queryKey: users.myGuildsQueryKey });
+  }
+}
+
+/** Инвалидация REST-данных сервера и участников после событий ролей. */
+async function invalidateMembershipQueries(guildId: string): Promise<void> {
+  const [{ getQueryClient }, guilds] = await Promise.all([
+    import('@/lib/queryClient'),
+    import('@/api/guilds'),
+  ]);
+  const client = getQueryClient();
+  await Promise.all([
+    client.invalidateQueries({ queryKey: guilds.guildMembersQueryKey(guildId) }),
+    client.invalidateQueries({ queryKey: guilds.guildRolesQueryKey(guildId) }),
+    client.invalidateQueries({ queryKey: guilds.guildQueryKey(guildId) }),
+  ]);
+}
+
+/** Инвалидация данных удалённого сервера (карточка, участники, каналы). */
+async function invalidateGuildQueries(guildId: string): Promise<void> {
+  const [{ getQueryClient }, guilds] = await Promise.all([
+    import('@/lib/queryClient'),
+    import('@/api/guilds'),
+  ]);
+  const client = getQueryClient();
+  await Promise.all([
+    client.invalidateQueries({ queryKey: guilds.guildQueryKey(guildId) }),
+    client.invalidateQueries({ queryKey: guilds.guildChannelsQueryKey(guildId) }),
+    client.invalidateQueries({ queryKey: guilds.guildMembersQueryKey(guildId) }),
+  ]);
+}
+
+/** Держит URL в согласии с выбранным сервером/комнатой после удалений. */
+function syncUrlWithSelection(): void {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  const state = useSessionStore.getState();
+  const target =
+    state.selectedGuildId === null
+      ? '/app/empty'
+      : state.selectedChannelId === null
+        ? `/app/${state.selectedGuildId}`
+        : `/app/${state.selectedGuildId}/${state.selectedChannelId}`;
+  if (window.location.pathname !== target) {
+    window.history.replaceState(null, '', target);
+    window.dispatchEvent(new PopStateEvent('popstate'));
+  }
+}
+
 function parseResumedUser(payload: unknown): GatewayUser | null {
   if (typeof payload !== 'object' || payload === null) {
     return null;

web/src/stores/session.ts

@@ -29,10 +29,18 @@ interface SessionState {
   setUser: (user: GatewayUser | null) => void;
   /** Синхронизация с REST-профилем (PATCH /users/@me возвращает полного user). */
   patchUser: (user: User) => void;
+  /** USER_UPDATE: обновляет только текущего пользователя. */
+  applyUserUpdate: (user: GatewayUser) => void;
   upsertGuild: (guild: GuildSummary) => void;
+  /** GUILD_UPDATE: имя сервера (описание в снапшоте Фазы 1 не хранится). */
+  renameGuild: (guildId: string, name: string) => void;
   removeGuild: (guildId: string) => void;
   setGuildChannels: (guildId: string, channels: Channel[]) => void;
   upsertChannel: (guildId: string, channel: Channel) => void;
+  /** CHANNEL_DELETE: удаляет комнату и переносит выбор на первую доступную. */
+  removeChannel: (guildId: string, channelId: string) => void;
+  /** Первая доступная (видимая) комната сервера — для выбора после удалений. */
+  firstChannelId: (guildId: string) => string | null;
   selectGuild: (guildId: string | null) => void;
   selectChannel: (guildId: string | null, channelId: string | null) => void;
   reset: () => void;
@@ -137,6 +145,15 @@ export const useSessionStore = create<SessionState>((set, get) => ({
     set({ user: next });
   },
 
+  applyUserUpdate: (user) => {
+    const current = get().user;
+    if (current === null || current.id !== user.id) {
+      // Профиль другого участника в Фазе 1 негде показывать.
+      return;
+    }
+    set({ user });
+  },
+
   upsertGuild: (guild) => {
     const guilds = get().guilds;
     const index = guilds.findIndex((item) => item.id === guild.id);
@@ -154,12 +171,26 @@ export const useSessionStore = create<SessionState>((set, get) => ({
     set({ guilds: next });
   },
 
+  renameGuild: (guildId, name) => {
+    set({
+      guilds: get().guilds.map((guild) => (guild.id === guildId ? { ...guild, name } : guild)),
+    });
+  },
+
   removeGuild: (guildId) => {
     const state = get();
+    const guilds = state.guilds.filter((guild) => guild.id !== guildId);
+    const selectionLost = state.selectedGuildId === guildId;
+    // Если удалили выбранный сервер — выбираем первый оставшийся.
+    const nextGuild = selectionLost ? (guilds[0] ?? null) : null;
     set({
-      guilds: state.guilds.filter((guild) => guild.id !== guildId),
-      selectedGuildId: state.selectedGuildId === guildId ? null : state.selectedGuildId,
-      selectedChannelId: state.selectedGuildId === guildId ? null : state.selectedChannelId,
+      guilds,
+      selectedGuildId: selectionLost ? (nextGuild?.id ?? null) : state.selectedGuildId,
+      selectedChannelId: selectionLost
+        ? nextGuild === null
+          ? null
+          : firstVisibleChannelId(nextGuild)
+        : state.selectedChannelId,
     });
   },
 
@@ -186,6 +217,24 @@ export const useSessionStore = create<SessionState>((set, get) => ({
     });
   },
 
+  removeChannel: (guildId, channelId) => {
+    const state = get();
+    const guild = state.guilds.find((item) => item.id === guildId);
+    const channels = (guild?.channels ?? []).filter((channel) => channel.id !== channelId);
+    const selectionLost = state.selectedChannelId === channelId;
+    set({
+      guilds: state.guilds.map((item) => (item.id === guildId ? { ...item, channels } : item)),
+      selectedChannelId: selectionLost
+        ? firstVisibleChannelId({ channels })
+        : state.selectedChannelId,
+    });
+  },
+
+  firstChannelId: (guildId) => {
+    const guild = get().guilds.find((item) => item.id === guildId);
+    return guild === undefined ? null : firstVisibleChannelId(guild);
+  },
+
   selectGuild: (guildId) => {
     set({ selectedGuildId: guildId, selectedChannelId: null });
   },
@@ -199,6 +248,16 @@ export const useSessionStore = create<SessionState>((set, get) => ({
   },
 }));
 
+/** Первая видимая текстовая (или любая) комната сервера. */
+function firstVisibleChannelId(guild: { channels: Channel[] }): string | null {
+  const visible = guild.channels
+    .filter((channel) => channel.type !== 'category' && channel.can_view !== false)
+    .slice()
+    .sort((left, right) => left.position - right.position);
+  const text = visible.find((channel) => channel.type === 'text') ?? visible[0];
+  return text?.id ?? null;
+}
+
 /** Селектор сервера по id (без подписки на весь список). */
 export function selectGuildById(guildId: string | null) {
   return (state: SessionState): SessionGuild | null =>