feat(messages): сообщения, реакции, пины, typing, read states и поиск

Бэкенд текстовой связи (AGENT.md 7.6, 7.15, 7.16, 8.6):

- POST/GET/PATCH/DELETE /channels/{id}/messages, ответы и упоминания,
  окно правки 24 часа, права автора или MANAGE_MESSAGES;
- реакции (PUT/DELETE .../reactions/{emoji}) с агрегацией и отметкой «моя»;
- закрепления (GET/PUT/DELETE .../pins) под MANAGE_MESSAGES;
- typing с лимитом 1/3 с и адресной рассылкой всем, кроме автора;
- read states: POST /channels/{id}/ack, синхронизация READ_STATE_UPDATE между
  устройствами пользователя;
- поиск FTS5 по комнате (10/мин) с экранированием запроса;
- лимиты отправки 5/5 с (burst 10) и slowmode комнаты; администратор инстанса
  обходит и то, и другое (AGENT.md 7.19);
- Gateway: DispatchToChannel/DispatchToChannelExcept доставляют события комнат
  только тем, кто видит комнату (VIEW_CHANNEL), права считает общий движок;
- store: messages, message_reactions, channel_read_states, files (загрузка
  файлов появится вместе с вложениями).

Тесты: жизненный цикл сообщения, видимость скрытой комнаты (404 участнику,
200 админу), slowmode, упоминания и ответы, typing и read state, фильтрация
событий комнаты между двумя WS-клиентами.

web/src/api/guilds.ts

@@ -80,3 +80,23 @@ export function joinGuild(guildId: string): Promise<{ ok: true }> {
 export function leaveGuild(guildId: string): Promise<{ ok: true }> {
   return request<{ ok: true }>(`/guilds/${encodeURIComponent(guildId)}/leave`, { method: 'POST' });
 }
+
+/**
+ * Свой никнейм на сервере: сервер разрешает участнику менять его без прав
+ * (пустая строка сбрасывает ник).
+ */
+export async function updateGuildMember(
+  guildId: string,
+  userId: string,
+  input: { nickname: string },
+): Promise<void> {
+  await request<{ ok: true }>(
+    `/guilds/${encodeURIComponent(guildId)}/members/${encodeURIComponent(userId)}`,
+    { method: 'PATCH', body: input },
+  );
+}
+
+/** Удаление сервера: доступно владельцу и администратору инстанса. */
+export async function deleteGuild(guildId: string): Promise<void> {
+  await request<{ ok: true }>(`/guilds/${encodeURIComponent(guildId)}`, { method: 'DELETE' });
+}

web/src/components/ui/Menu.tsx

@@ -0,0 +1,194 @@
+import {
+  useEffect,
+  useRef,
+  type ButtonHTMLAttributes,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type ReactNode,
+  type RefObject,
+} from 'react';
+
+interface MenuProps {
+  open: boolean;
+  /** Доступное имя меню (озвучивается скринридером). */
+  label: string;
+  onClose: () => void;
+  children: ReactNode;
+  /**
+   * Элемент-якорь: клик по нему не считается кликом «вне меню» (иначе меню
+   * закрывалось бы и тут же открывалось заново), ему же возвращается фокус.
+   */
+  anchorRef?: RefObject<HTMLElement | null>;
+  className?: string;
+}
+
+const ITEM_SELECTOR =
+  '[role="menuitem"]:not([disabled]),[role="menuitemradio"]:not([disabled]),[role="menuitemcheckbox"]:not([disabled])';
+
+/**
+ * Всплывающее меню (`role="menu"`): закрывается по Escape и клику вне,
+ * открывается с фокусом на первом пункте, стрелки/Home/End перемещают фокус,
+ * Tab закрывает меню и возвращает управление странице.
+ *
+ * Позиционирование задаёт родитель: панель абсолютная и растёт вверх
+ * (`.gl-popover`), поэтому меню удобно вешать над нижней панелью пользователя.
+ */
+export function Menu({ open, label, onClose, children, anchorRef, className = '' }: MenuProps) {
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  const onCloseRef = useRef(onClose);
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
+
+  // Фокус — на первом пункте: меню сразу доступно с клавиатуры.
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const items = panelRef.current?.querySelectorAll<HTMLElement>(ITEM_SELECTOR);
+    items?.[0]?.focus();
+  }, [open]);
+
+  // Клик вне меню (и вне якоря) закрывает его.
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onPointerDown = (event: MouseEvent): void => {
+      const target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+      if (panelRef.current?.contains(target) === true) {
+        return;
+      }
+      if (anchorRef?.current?.contains(target) === true) {
+        return;
+      }
+      onCloseRef.current();
+    };
+    document.addEventListener('mousedown', onPointerDown);
+    document.addEventListener('touchstart', onPointerDown);
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown);
+      document.removeEventListener('touchstart', onPointerDown);
+    };
+  }, [open, anchorRef]);
+
+  // Escape работает и когда фокус ушёл на якорь.
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') {
+        onCloseRef.current();
+        anchorRef?.current?.focus();
+      }
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [open, anchorRef]);
+
+  const onKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>): void => {
+    if (event.key === 'Tab') {
+      // Меню — не часть tab-порядка: уводим фокус дальше по странице.
+      onClose();
+      return;
+    }
+    const items = Array.from(panelRef.current?.querySelectorAll<HTMLElement>(ITEM_SELECTOR) ?? []);
+    if (items.length === 0) {
+      return;
+    }
+    const current = items.findIndex((item) => item === document.activeElement);
+    const move = (next: number): void => {
+      event.preventDefault();
+      const target = items[(next + items.length) % items.length];
+      target?.focus();
+    };
+    switch (event.key) {
+      case 'ArrowDown':
+        move(current + 1);
+        return;
+      case 'ArrowUp':
+        move(current <= 0 ? items.length - 1 : current - 1);
+        return;
+      case 'Home':
+        move(0);
+        return;
+      case 'End':
+        move(items.length - 1);
+        return;
+      default:
+        return;
+    }
+  };
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={panelRef}
+      role="menu"
+      aria-label={label}
+      onKeyDown={onKeyDown}
+      className={`gl-popover absolute bottom-full left-0 z-40 mb-2 min-w-56 rounded-[var(--radius-md)] border border-border/60 bg-surface-2 p-1 shadow-[var(--shadow-3)] ${className}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Иконка слева (декоративная). */
+  icon?: ReactNode;
+  /** Для `role="menuitemradio"`: выбран ли пункт (рисуется галочка). */
+  selected?: boolean;
+  danger?: boolean;
+}
+
+/** Пункт меню: обычный (`menuitem`) или переключатель (`menuitemradio`). */
+export function MenuItem({
+  icon,
+  selected = false,
+  danger = false,
+  className = '',
+  children,
+  ...rest
+}: MenuItemProps) {
+  const role = rest.role ?? 'menuitem';
+  return (
+    <button
+      {...rest}
+      type="button"
+      role={role}
+      tabIndex={rest.tabIndex ?? -1}
+      aria-checked={role === 'menuitemradio' ? selected : undefined}
+      className={`flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1.5 text-left text-sm transition-colors duration-[var(--duration-fast)] focus-visible:bg-surface-3 disabled:cursor-not-allowed disabled:opacity-50 ${
+        danger ? 'text-danger hover:bg-danger/10' : 'text-fg hover:bg-surface-3'
+      } ${className}`}
+    >
+      <span aria-hidden="true" className="w-4 shrink-0 text-center">
+        {selected ? '✓' : (icon ?? '')}
+      </span>
+      <span className="min-w-0 flex-1 truncate">{children}</span>
+    </button>
+  );
+}
+
+/** Заголовок группы пунктов внутри меню. */
+export function MenuGroupLabel({ children }: { children: ReactNode }) {
+  return (
+    <p role="presentation" className="px-2 py-1 text-xs font-semibold uppercase text-fg-muted">
+      {children}
+    </p>
+  );
+}
+
+/** Разделитель между группами пунктов. */
+export function MenuSeparator() {
+  return <div role="separator" className="my-1 h-px bg-border/60" />;
+}

web/src/components/ui/Modal.tsx

@@ -1,6 +1,8 @@
-import { useEffect, useRef, type ReactNode } from 'react';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { motionDelay } from '@/lib/motion';
+
 interface ModalProps {
   open: boolean;
   title: string;
@@ -9,13 +11,47 @@ interface ModalProps {
   footer?: ReactNode;
 }
 
+/** Длительность анимации закрытия: столько панель живёт в DOM после `open=false`. */
+const EXIT_MS = 140;
+
 /**
  * Простое модальное окно: закрывается по Escape и по клику на подложку,
  * focus-lock обеспечивается браузером за счёт role="dialog" и автофокуса.
+ *
+ * Появление и исчезновение анимированы (см. `.gl-pop-in`/`.gl-pop-out`):
+ * при закрытии узел остаётся в DOM до конца обратной анимации, а при
+ * `prefers-reduced-motion` удаляется сразу.
  */
 export function Modal({ open, title, onClose, children, footer }: ModalProps) {
   const { t } = useTranslation();
   const panelRef = useRef<HTMLDivElement | null>(null);
+  const [mounted, setMounted] = useState(open);
+  const [closing, setClosing] = useState(false);
+  // Свежий onClose без перезапуска эффекта фокуса при каждом рендере.
+  const onCloseRef = useRef(onClose);
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
+
+  // Монтирование/размонтирование с учётом анимации закрытия.
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      setClosing(false);
+      return;
+    }
+    if (!mounted) {
+      return;
+    }
+    setClosing(true);
+    const timer = window.setTimeout(() => {
+      setMounted(false);
+      setClosing(false);
+    }, motionDelay(EXIT_MS));
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, [open, mounted]);
 
   useEffect(() => {
     if (!open) {
@@ -23,26 +59,31 @@ export function Modal({ open, title, onClose, children, footer }: ModalProps) {
     }
     const onKeyDown = (event: KeyboardEvent): void => {
       if (event.key === 'Escape') {
-        onClose();
+        onCloseRef.current();
       }
     };
     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();
     return () => {
       document.removeEventListener('keydown', onKeyDown);
+      // Возвращаем фокус туда, откуда окно открыли.
+      previous?.focus();
     };
-  }, [open, onClose]);
+  }, [open]);
 
-  if (!open) {
+  if (!mounted) {
     return null;
   }
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
+      className={`fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 ${
+        closing ? 'gl-backdrop-out' : 'gl-backdrop-in'
+      }`}
       onMouseDown={(event) => {
         if (event.target === event.currentTarget) {
           onClose();
@@ -54,14 +95,16 @@ export function Modal({ open, title, onClose, children, footer }: ModalProps) {
         role="dialog"
         aria-modal="true"
         aria-label={title}
-        className="w-full max-w-md rounded-[var(--radius-lg)] border border-border/60 bg-surface-1 p-5 shadow-[var(--shadow-3)]"
+        className={`w-full max-w-md rounded-[var(--radius-lg)] border border-border/60 bg-surface-1 p-5 shadow-[var(--shadow-3)] ${
+          closing ? 'gl-pop-out' : 'gl-pop-in'
+        }`}
       >
         <div className="flex items-start justify-between gap-4">
           <h2 className="text-lg font-semibold">{title}</h2>
           <button
             type="button"
             aria-label={t('common.close')}
-            className="rounded-[var(--radius-sm)] px-2 text-lg leading-none text-fg-muted hover:text-fg"
+            className="rounded-[var(--radius-sm)] px-2 text-lg leading-none text-fg-muted transition-colors duration-[var(--duration-fast)] hover:text-fg active:scale-95"
             onClick={onClose}
           >
             ×

web/src/components/ui/Skeleton.tsx

@@ -0,0 +1,37 @@
+import { useTranslation } from 'react-i18next';
+
+interface SkeletonProps {
+  className?: string;
+}
+
+/** Одна полоса-скелетон с бегущим блеском (см. `.gl-skeleton` в index.css). */
+export function Skeleton({ className = '' }: SkeletonProps) {
+  return <span aria-hidden="true" className={`gl-skeleton ${className}`} />;
+}
+
+interface SkeletonLinesProps {
+  /** Сколько строк-полос нарисовать. */
+  rows?: number;
+  className?: string;
+}
+
+/**
+ * Набор полос вместо текста «Загрузка…»: используется в списках и секциях
+ * настроек, чтобы интерфейс не «прыгал» после прихода данных.
+ */
+export function SkeletonLines({ rows = 3, className = '' }: SkeletonLinesProps) {
+  const { t } = useTranslation();
+  return (
+    <div
+      role="status"
+      aria-busy="true"
+      aria-label={t('common.loading')}
+      data-testid="skeleton"
+      className={`flex flex-col gap-2 ${className}`}
+    >
+      {Array.from({ length: Math.max(rows, 1) }, (_, index) => (
+        <Skeleton key={index} className="h-4 w-full" />
+      ))}
+    </div>
+  );
+}

web/src/index.css

@@ -29,6 +29,8 @@
 
   --duration-fast: 120ms;
   --duration-base: 200ms;
+  /* Шаг каскадного появления элементов списка (см. .gl-stagger). */
+  --stagger-step: 28ms;
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
@@ -70,12 +72,237 @@ body {
   outline-offset: 2px;
 }
 
+/*
+ * Анимации клиента (docs/client-web.md §3): сдержанные, быстрые, без
+ * зависимостей. Ключевые кадры и классы живут здесь, а не в inline-стилях,
+ * чтобы их можно было отключить одним media-запросом ниже.
+ *
+ * Все входные анимации используют fill-mode `backwards`: до старта элемент
+ * уже в начальном кадре (это нужно каскаду с задержками), а после финиша
+ * отдаёт управление обычным стилям — hover-трансформации продолжают работать.
+ */
+
+/* Появление страницы при смене маршрута: fade + сдвиг на 6px. */
+@keyframes gl-page-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.gl-page {
+  animation: gl-page-in var(--duration-base) var(--ease-out) backwards;
+}
+
+/* Затемнение подложки модального окна. */
+@keyframes gl-backdrop-in {
+  from {
+    background-color: rgb(0 0 0 / 0);
+  }
+  to {
+    background-color: rgb(0 0 0 / 0.6);
+  }
+}
+
+@keyframes gl-backdrop-out {
+  from {
+    background-color: rgb(0 0 0 / 0.6);
+  }
+  to {
+    background-color: rgb(0 0 0 / 0);
+  }
+}
+
+.gl-backdrop-in {
+  animation: gl-backdrop-in var(--duration-fast) var(--ease-out) backwards;
+}
+
+.gl-backdrop-out {
+  animation: gl-backdrop-out var(--duration-fast) var(--ease-out) forwards;
+}
+
+/* Панель модального окна: scale(0.96 → 1) с небольшим подъёмом. */
+@keyframes gl-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes gl-pop-out {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96) translateY(8px);
+  }
+}
+
+.gl-pop-in {
+  animation: gl-pop-in var(--duration-base) var(--ease-out) backwards;
+}
+
+.gl-pop-out {
+  animation: gl-pop-out var(--duration-fast) var(--ease-out) forwards;
+}
+
+/* Всплывающее меню/поповер: fade + сдвиг от якоря (меню растёт вверх). */
+@keyframes gl-popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.gl-popover {
+  transform-origin: bottom;
+  animation: gl-popover-in var(--duration-fast) var(--ease-out) backwards;
+}
+
+/*
+ * Каскадное появление списка. Задержка растёт только у первых восьми
+ * элементов — дальше список появляется без ступенек, чтобы длинные
+ * списки не «догоняли» пользователя.
+ */
+.gl-stagger > * {
+  animation: gl-page-in var(--duration-base) var(--ease-out) backwards;
+}
+
+.gl-stagger > *:nth-child(1) {
+  animation-delay: 0ms;
+}
+
+.gl-stagger > *:nth-child(2) {
+  animation-delay: calc(var(--stagger-step) * 1);
+}
+
+.gl-stagger > *:nth-child(3) {
+  animation-delay: calc(var(--stagger-step) * 2);
+}
+
+.gl-stagger > *:nth-child(4) {
+  animation-delay: calc(var(--stagger-step) * 3);
+}
+
+.gl-stagger > *:nth-child(5) {
+  animation-delay: calc(var(--stagger-step) * 4);
+}
+
+.gl-stagger > *:nth-child(6) {
+  animation-delay: calc(var(--stagger-step) * 5);
+}
+
+.gl-stagger > *:nth-child(7) {
+  animation-delay: calc(var(--stagger-step) * 6);
+}
+
+.gl-stagger > *:nth-child(8) {
+  animation-delay: calc(var(--stagger-step) * 7);
+}
+
+.gl-stagger > *:nth-child(n + 9) {
+  animation-delay: 0ms;
+}
+
+/* Индикатор активной комнаты: полоска слева плавно «вырастает». */
+@keyframes gl-indicator-in {
+  from {
+    opacity: 0;
+    transform: translateY(-50%) scaleY(0.3);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(-50%) scaleY(1);
+  }
+}
+
+.gl-indicator::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 3px;
+  height: 60%;
+  border-radius: 999px;
+  background-color: var(--color-accent);
+  transform: translateY(-50%);
+  animation: gl-indicator-in var(--duration-base) var(--ease-out) backwards;
+}
+
+/* Индикатор активного сервера в рейке: кольцо, проявляющееся из центра. */
+@keyframes gl-ring-in {
+  from {
+    opacity: 0;
+    transform: scale(0.88);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.gl-ring::after {
+  content: '';
+  position: absolute;
+  inset: -3px;
+  border: 2px solid var(--color-accent);
+  border-radius: var(--radius-lg);
+  pointer-events: none;
+  animation: gl-ring-in var(--duration-base) var(--ease-out) backwards;
+}
+
+/* Скелетон загрузки: полоса с бегущим блеском. */
+@keyframes gl-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+.gl-skeleton {
+  display: block;
+  border-radius: var(--radius-sm);
+  background-color: var(--color-surface-2);
+  background-image: linear-gradient(
+    90deg,
+    var(--color-surface-2) 25%,
+    var(--color-surface-3) 50%,
+    var(--color-surface-2) 75%
+  );
+  background-size: 200% 100%;
+  animation: gl-shimmer 1.4s linear infinite;
+}
+
+/*
+ * Доступность: при `prefers-reduced-motion: reduce` анимации становятся
+ * мгновенными. Задержки каскада тоже обнуляем — иначе элементы списка
+ * появлялись бы по очереди без анимации.
+ */
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
     animation-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
+    transition-delay: 0ms !important;
+    scroll-behavior: auto !important;
   }
 }

web/src/lib/format.ts

@@ -1,5 +1,17 @@
 import { ApiError, apiErrorCode } from '@/api/client';
 
+/**
+ * Цвет роли сервера приходит целым числом (0 — цвет не задан).
+ * Возвращаем CSS-цвет или `null`, чтобы отрисовать нейтральную заглушку.
+ */
+export function roleColorHex(color: number): string | null {
+  if (!Number.isFinite(color) || color <= 0) {
+    return null;
+  }
+  const rgb = Math.trunc(color) & 0xffffff;
+  return `#${rgb.toString(16).padStart(6, '0')}`;
+}
+
 export function formatBytes(bytes: number, locale = 'ru'): string {
   if (!Number.isFinite(bytes) || bytes < 0) {
     return '—';

web/src/lib/identity.ts

@@ -61,6 +61,26 @@ export function canManageGuild(
   );
 }
 
+/**
+ * Может ли пользователь менять настройки сервера (имя, описание, удаление).
+ * `MANAGE_CHANNELS` сюда не входит: его достаточно для комнат, но не для
+ * самого сервера — сервер разрешает `PATCH /guilds/{id}` только владельцу,
+ * ADMINISTRATOR и MANAGE_GUILD.
+ */
+export function canManageGuildSettings(
+  permissions: readonly string[],
+  ownerId: string,
+  userId: string | undefined,
+): boolean {
+  if (userId !== undefined && userId === ownerId) {
+    return true;
+  }
+  return (
+    hasPermission(permissions, PERMISSION_ADMINISTRATOR) ||
+    hasPermission(permissions, PERMISSION_MANAGE_GUILD)
+  );
+}
+
 /** Человекочитаемая дата/время для списков (сессии, аудит). */
 export function formatDateTime(value: string, locale: string): string {
   const date = new Date(value);

web/src/lib/motion.ts

@@ -0,0 +1,23 @@
+/**
+ * Учёт системной настройки `prefers-reduced-motion`.
+ *
+ * CSS-анимации отключаются media-запросом в `index.css`, но удаление узлов
+ * из DOM после анимации закрытия делает JS по таймеру — там задержку нужно
+ * снять вручную, иначе окно исчезало бы с паузой без всякой анимации.
+ */
+export function prefersReducedMotion(): boolean {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+    return false;
+  }
+  try {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  } catch {
+    // Некоторые окружения (старые jsdom) не умеют разбирать запрос.
+    return false;
+  }
+}
+
+/** Длительность задержки перед удалением узла: 0 при reduced-motion. */
+export function motionDelay(durationMs: number): number {
+  return prefersReducedMotion() ? 0 : durationMs;
+}

web/src/pages/app/UserPanel.tsx

@@ -1,17 +1,26 @@
-import { useCallback } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
-import { Link, useNavigate } from 'react-router';
+import { useNavigate } from 'react-router';
 
 import { logout } from '@/api/auth';
+import { currentUserQueryKey, updateProfile } from '@/api/users';
+import { userStatuses, type UserStatus } from '@/api/types';
 import { Avatar } from '@/components/ui/Avatar';
+import { Menu, MenuGroupLabel, MenuItem, MenuSeparator } from '@/components/ui/Menu';
 import { useCurrentUser } from '@/lib/hooks';
 import { useApiErrorMessage } from '@/lib/useApiErrorMessage';
 import { useGatewayStore } from '@/stores/gateway';
 import { useSessionStore } from '@/stores/session';
-import { userStatuses, type UserStatus } from '@/api/types';
 
-/** Панель пользователя внизу: аватар, имя, статус, настройки и выход. */
+/** Статусы, которые можно выставить из меню: «не в сети» сервер выводит сам. */
+const selectableStatuses = userStatuses.filter((value) => value !== 'offline');
+
+/**
+ * Панель пользователя внизу слева: аватар, имя и статус. Клик по аватару,
+ * имени или шестерёнке открывает всплывающее вверх меню с настройками,
+ * сменой статуса и выходом (см. `Menu`).
+ */
 export function UserPanel() {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -21,8 +30,12 @@ export function UserPanel() {
   const sessionUser = useSessionStore((state) => state.user);
   const disconnect = useGatewayStore((state) => state.disconnect);
 
+  const [menuOpen, setMenuOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+
   const name = sessionUser?.display_name ?? currentUser.data?.display_name ?? '';
   const username = sessionUser?.username ?? currentUser.data?.username ?? '';
+  const displayName = name === '' ? username : name;
   const status: UserStatus = sessionUser?.status ?? currentUser.data?.status ?? 'online';
   const customStatus = sessionUser?.custom_status ?? '';
   const emoji = sessionUser?.custom_status_emoji ?? '';
@@ -40,6 +53,15 @@ export function UserPanel() {
     },
   });
 
+  const changeStatus = useMutation({
+    mutationFn: (next: UserStatus) => updateProfile({ status: next }),
+    onSuccess: (updated) => {
+      queryClient.setQueryData(currentUserQueryKey, updated);
+      useSessionStore.getState().patchUser(updated);
+      setMenuOpen(false);
+    },
+  });
+
   const statusLabel = userStatuses.includes(status)
     ? t(`user.status.${status}`)
     : t('user.status.offline');
@@ -51,55 +73,120 @@ export function UserPanel() {
     void navigator.clipboard?.writeText(currentUser.data.id);
   }, [currentUser.data]);
 
+  const toggleMenu = useCallback(() => setMenuOpen((value) => !value), []);
+  const closeMenu = useCallback(() => setMenuOpen(false), []);
+
+  const goTo = (path: string) => (): void => {
+    setMenuOpen(false);
+    void navigate(path);
+  };
+
+  const error = changeStatus.error ?? signOut.error;
+  const errorText = error === null || error === undefined ? null : describeError(error);
+
   return (
     <footer
       aria-label={t('user.panelLabel')}
-      className="flex items-center gap-2 border-t border-border/40 bg-surface-2/80 px-2 py-2"
+      className="relative flex flex-col border-t border-border/40 bg-surface-2/80"
     >
-      <Avatar name={name === '' ? username : name} seed={seed} fileId={avatarFileId} size="md" />
-      <div className="min-w-0 flex-1">
-        <p className="truncate text-sm font-medium" title={name}>
-          {name === '' ? username : name}
-        </p>
-        <p className="truncate text-xs text-fg-muted" title={statusLabel}>
-          <span aria-hidden="true" className="mr-1">
-            {emoji}
+      <div className="flex items-center gap-1 px-2 py-2">
+        <button
+          ref={triggerRef}
+          type="button"
+          aria-haspopup="menu"
+          aria-expanded={menuOpen}
+          aria-label={t('user.menu.open')}
+          onClick={toggleMenu}
+          className="flex min-w-0 flex-1 items-center gap-2 rounded-[var(--radius-md)] px-1 py-1 text-left transition-colors duration-[var(--duration-fast)] hover:bg-surface-3/70 active:bg-surface-3"
+        >
+          <Avatar name={displayName} seed={seed} fileId={avatarFileId} size="md" />
+          <span className="min-w-0 flex-1">
+            <span className="block truncate text-sm font-medium" title={displayName}>
+              {displayName}
+            </span>
+            <span className="block truncate text-xs text-fg-muted" title={statusLabel}>
+              {emoji === '' ? null : (
+                <span aria-hidden="true" className="mr-1">
+                  {emoji}
+                </span>
+              )}
+              {customStatus === '' ? statusLabel : `${statusLabel} · ${customStatus}`}
+            </span>
           </span>
-          {customStatus === '' ? statusLabel : `${statusLabel} · ${customStatus}`}
-        </p>
+        </button>
+
+        <button
+          type="button"
+          aria-label={t('user.copyId')}
+          title={t('user.copyId')}
+          className="rounded-[var(--radius-sm)] px-2 py-1 text-fg-muted transition-colors duration-[var(--duration-fast)] hover:bg-surface-3 hover:text-fg active:scale-95"
+          onClick={onCopyId}
+        >
+          #
+        </button>
+        <button
+          type="button"
+          aria-haspopup="menu"
+          aria-expanded={menuOpen}
+          aria-label={t('user.settings')}
+          title={t('user.settings')}
+          className="rounded-[var(--radius-sm)] px-2 py-1 text-fg-muted transition-colors duration-[var(--duration-fast)] hover:bg-surface-3 hover:text-fg active:scale-95"
+          onClick={toggleMenu}
+        >
+          ⚙
+        </button>
       </div>
-      <button
-        type="button"
-        aria-label={t('user.copyId')}
-        title={t('user.copyId')}
-        className="rounded-[var(--radius-sm)] px-2 py-1 text-fg-muted hover:bg-surface-3 hover:text-fg"
-        onClick={onCopyId}
+
+      <Menu
+        open={menuOpen}
+        label={t('user.menu.label')}
+        onClose={closeMenu}
+        anchorRef={triggerRef}
       >
-        #
-      </button>
-      <Link
-        to="/settings"
-        aria-label={t('user.settings')}
-        title={t('user.settings')}
-        className="rounded-[var(--radius-sm)] px-2 py-1 text-fg-muted hover:bg-surface-3 hover:text-fg"
-      >
-        ⚙
-      </Link>
-      <button
-        type="button"
-        aria-label={t('user.logout')}
-        title={t('user.logout')}
-        disabled={signOut.isPending}
-        className="rounded-[var(--radius-sm)] px-2 py-1 text-fg-muted hover:bg-surface-3 hover:text-fg disabled:opacity-50"
-        onClick={() => signOut.mutate()}
-      >
-        ⏻
-      </button>
-      {signOut.isError ? (
-        <span role="alert" className="max-w-40 truncate text-xs text-danger">
-          {describeError(signOut.error)}
-        </span>
-      ) : null}
+        <MenuGroupLabel>{displayName}</MenuGroupLabel>
+        <MenuItem icon="👤" onClick={goTo('/settings/account/profile')}>
+          {t('user.menu.account')}
+        </MenuItem>
+        <MenuItem icon="🗄" onClick={goTo('/settings/servers')}>
+          {t('user.menu.guilds')}
+        </MenuItem>
+        <MenuSeparator />
+        <div role="group" aria-label={t('user.menu.status')}>
+          <MenuGroupLabel>{t('user.menu.status')}</MenuGroupLabel>
+          {selectableStatuses.map((value) => (
+            <MenuItem
+              key={value}
+              role="menuitemradio"
+              selected={value === status}
+              disabled={changeStatus.isPending}
+              onClick={() => {
+                changeStatus.reset();
+                changeStatus.mutate(value);
+              }}
+            >
+              {t(`user.status.${value}`)}
+            </MenuItem>
+          ))}
+        </div>
+        <MenuSeparator />
+        <MenuItem
+          danger
+          icon="⏻"
+          disabled={signOut.isPending}
+          onClick={() => {
+            signOut.reset();
+            signOut.mutate();
+          }}
+        >
+          {t(signOut.isPending ? 'user.loggingOut' : 'user.logout')}
+        </MenuItem>
+      </Menu>
+
+      {errorText === null ? null : (
+        <p role="alert" className="px-3 pb-2 text-xs text-danger">
+          {errorText}
+        </p>
+      )}
     </footer>
   );
 }

web/src/pages/lazyPages.ts

@@ -13,7 +13,9 @@ export const AppLayout = lazy(() => import('@/pages/app/AppLayout'));
 export const GuildView = lazy(() => import('@/pages/app/GuildView'));
 export const NoGuildView = lazy(() => import('@/pages/app/NoGuildView'));
 export const SettingsLayout = lazy(() => import('@/pages/settings/SettingsLayout'));
+export const AccountSettingsLayout = lazy(() => import('@/pages/settings/AccountSettingsLayout'));
 export const ProfileSettingsPage = lazy(() => import('@/pages/settings/ProfileSettingsPage'));
 export const SecuritySettingsPage = lazy(() => import('@/pages/settings/SecuritySettingsPage'));
 export const AppearanceSettingsPage = lazy(() => import('@/pages/settings/AppearanceSettingsPage'));
 export const InstanceSettingsPage = lazy(() => import('@/pages/settings/InstanceSettingsPage'));
+export const ServersSettingsPage = lazy(() => import('@/pages/settings/ServersSettingsPage'));

web/src/pages/settings/AccountSettingsLayout.tsx

@@ -0,0 +1,48 @@
+import { useTranslation } from 'react-i18next';
+import { NavLink, Outlet } from 'react-router';
+
+import { SettingsSuspense } from '@/pages/settings/SettingsSection';
+import { useCurrentUser } from '@/lib/hooks';
+
+/**
+ * Вкладки настроек аккаунта и инстанса. Живут внутри `/settings/account/*`
+ * и выглядят так же, как панель выбора сервера в `/settings/servers/*`.
+ */
+export default function AccountSettingsLayout() {
+  const { t } = useTranslation();
+  const currentUser = useCurrentUser();
+
+  const tabs = [
+    { to: 'profile', label: t('settings.tabs.profile') },
+    { to: 'security', label: t('settings.tabs.security') },
+    { to: 'appearance', label: t('settings.tabs.appearance') },
+    ...(currentUser.data?.is_instance_admin === true
+      ? [{ to: 'instance', label: t('settings.tabs.instance') }]
+      : []),
+  ];
+
+  return (
+    <>
+      <nav aria-label={t('settings.tabs.label')} className="flex flex-wrap gap-2">
+        {tabs.map((tab) => (
+          <NavLink
+            key={tab.to}
+            to={tab.to}
+            className={({ isActive }) =>
+              `rounded-[var(--radius-md)] border px-3 py-1.5 text-sm transition-colors duration-[var(--duration-fast)] ${
+                isActive
+                  ? 'border-accent bg-surface-3 text-fg'
+                  : 'border-border/60 bg-surface-1 text-fg-muted hover:bg-surface-2 hover:text-fg'
+              }`
+            }
+          >
+            {tab.label}
+          </NavLink>
+        ))}
+      </nav>
+      <SettingsSuspense>
+        <Outlet />
+      </SettingsSuspense>
+    </>
+  );
+}

web/src/pages/settings/GuildGeneralSection.tsx

@@ -0,0 +1,95 @@
+import { useState, type FormEvent } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import { guildQueryKey, updateGuild } from '@/api/guilds';
+import { myGuildsQueryKey } from '@/api/users';
+import type { Guild } from '@/api/types';
+import { ErrorNotice } from '@/components/ui/ErrorNotice';
+import { Field, TextAreaField } from '@/components/ui/Field';
+import { Button } from '@/components/ui/primitives';
+import { useSessionStore } from '@/stores/session';
+import { SettingsSection } from '@/pages/settings/SettingsSection';
+
+interface GuildGeneralSectionProps {
+  guild: Guild;
+  /** Владелец или участник с правами управления — иначе поля только для чтения. */
+  canEdit: boolean;
+}
+
+/** Общее в настройках сервера: имя и описание (PATCH /guilds/{id}). */
+export function GuildGeneralSection({ guild, canEdit }: GuildGeneralSectionProps) {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const [name, setName] = useState(guild.name);
+  const [description, setDescription] = useState(guild.description);
+  const [saved, setSaved] = useState(false);
+
+  const save = useMutation({
+    mutationFn: () =>
+      updateGuild(guild.id, { name: name.trim(), description: description.trim() }),
+    onSuccess: (updated) => {
+      queryClient.setQueryData(guildQueryKey(guild.id), updated);
+      // Рейка и сайдбар берут имя из снапшота — обновляем и его.
+      useSessionStore.getState().renameGuild(guild.id, updated.name);
+      void queryClient.invalidateQueries({ queryKey: guildQueryKey(guild.id) });
+      void queryClient.invalidateQueries({ queryKey: myGuildsQueryKey });
+      setSaved(true);
+    },
+  });
+
+  const onSubmit = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+    if (!canEdit || name.trim() === '') {
+      return;
+    }
+    setSaved(false);
+    save.mutate();
+  };
+
+  return (
+    <SettingsSection
+      title={t('settings.servers.general.title')}
+      description={t('settings.servers.general.description')}
+    >
+      <form className="mt-4 flex flex-col gap-4" onSubmit={onSubmit} noValidate>
+        <Field
+          label={t('settings.servers.general.name')}
+          name="guild_name"
+          value={name}
+          maxLength={64}
+          disabled={!canEdit}
+          onChange={(event) => setName(event.target.value)}
+        />
+        <TextAreaField
+          label={t('settings.servers.general.guildDescription')}
+          placeholder={t('settings.servers.general.descriptionPlaceholder')}
+          name="guild_description"
+          rows={3}
+          maxLength={500}
+          value={description}
+          disabled={!canEdit}
+          onChange={(event) => setDescription(event.target.value)}
+        />
+        {canEdit ? null : (
+          <p className="text-xs text-fg-muted">{t('settings.servers.readOnlyHint')}</p>
+        )}
+
+        {save.isError ? <ErrorNotice error={save.error} /> : null}
+        {saved && !save.isError ? (
+          <p role="status" className="text-sm text-success">
+            {t('settings.servers.general.saved')}
+          </p>
+        ) : null}
+
+        {canEdit ? (
+          <div className="flex justify-end">
+            <Button type="submit" disabled={save.isPending || name.trim() === ''}>
+              {t(save.isPending ? 'common.saving' : 'common.save')}
+            </Button>
+          </div>
+        ) : null}
+      </form>
+    </SettingsSection>
+  );
+}

web/src/pages/settings/GuildMembersSection.tsx

@@ -0,0 +1,79 @@
+import { useTranslation } from 'react-i18next';
+
+import type { GuildMember } from '@/api/types';
+import { Avatar } from '@/components/ui/Avatar';
+import { ErrorNotice } from '@/components/ui/ErrorNotice';
+import { Badge } from '@/components/ui/primitives';
+import { SkeletonLines } from '@/components/ui/Skeleton';
+import { SettingsSection } from '@/pages/settings/SettingsSection';
+
+interface GuildMembersSectionProps {
+  members: GuildMember[] | undefined;
+  isPending: boolean;
+  error: unknown;
+  onRetry: () => void;
+}
+
+/** Сколько участников показываем в превью (полный список — в следующих фазах). */
+const PREVIEW_LIMIT = 10;
+
+/** «Участники»: превью первых десяти с аватаром, именем и числом ролей. */
+export function GuildMembersSection({
+  members,
+  isPending,
+  error,
+  onRetry,
+}: GuildMembersSectionProps) {
+  const { t } = useTranslation();
+  const preview = (members ?? []).slice(0, PREVIEW_LIMIT);
+
+  return (
+    <SettingsSection
+      title={t('settings.servers.members.title')}
+      description={t('settings.servers.members.description', { count: PREVIEW_LIMIT })}
+    >
+      {isPending ? (
+        <SkeletonLines className="mt-4" rows={4} />
+      ) : error !== null && error !== undefined ? (
+        <ErrorNotice className="mt-4" error={error} onRetry={onRetry} />
+      ) : preview.length === 0 ? (
+        <p className="mt-4 text-sm text-fg-muted">{t('settings.servers.members.empty')}</p>
+      ) : (
+        <ul className="gl-stagger mt-4 flex flex-col gap-1" data-testid="guild-members">
+          {preview.map((member) => {
+            const name =
+              member.nickname === undefined || member.nickname === ''
+                ? member.display_name
+                : member.nickname;
+            return (
+              <li
+                key={member.user_id}
+                className="flex items-center gap-3 rounded-[var(--radius-md)] px-2 py-1.5 transition-colors duration-[var(--duration-fast)] hover:bg-surface-2"
+              >
+                <Avatar
+                  name={member.display_name}
+                  seed={member.user_id}
+                  fileId={member.avatar_file_id}
+                  size="sm"
+                />
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate text-sm font-medium">{name}</span>
+                  <span className="block truncate text-xs text-fg-muted">
+                    {member.nickname === undefined || member.nickname === ''
+                      ? `@${member.username}`
+                      : `${member.display_name} · @${member.username}`}
+                  </span>
+                </span>
+                <Badge>
+                  {t('settings.servers.members.roles', { count: member.role_ids.length })}
+                </Badge>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+
+      <p className="mt-3 text-xs text-fg-muted">{t('settings.servers.members.more')}</p>
+    </SettingsSection>
+  );
+}

web/src/pages/settings/GuildNicknameSection.tsx

@@ -0,0 +1,93 @@
+import { useState, type FormEvent } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import { guildMembersQueryKey, updateGuildMember } from '@/api/guilds';
+import type { GuildMember } from '@/api/types';
+import { ErrorNotice } from '@/components/ui/ErrorNotice';
+import { Field } from '@/components/ui/Field';
+import { Button } from '@/components/ui/primitives';
+import { useSessionStore } from '@/stores/session';
+import { SettingsSection } from '@/pages/settings/SettingsSection';
+
+interface GuildNicknameSectionProps {
+  guildId: string;
+  /** id текущего пользователя: сервер разрешает менять ник самому себе. */
+  userId: string | undefined;
+  /** Ник из снапшота или списка участников. */
+  currentNickname: string;
+  /** Участники сервера (для подсказки, если ник пришёл не из снапшота). */
+  members: GuildMember[] | undefined;
+}
+
+/** «Мой профиль на сервере»: свой никнейм, пустое значение его сбрасывает. */
+export function GuildNicknameSection({
+  guildId,
+  userId,
+  currentNickname,
+  members,
+}: GuildNicknameSectionProps) {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const [nickname, setNickname] = useState(currentNickname);
+  const [saved, setSaved] = useState(false);
+
+  const save = useMutation({
+    mutationFn: (value: string) => updateGuildMember(guildId, userId ?? '', { nickname: value }),
+    onSuccess: (_result, value) => {
+      useSessionStore.getState().setMyNickname(guildId, value);
+      void queryClient.invalidateQueries({ queryKey: guildMembersQueryKey(guildId) });
+      setSaved(true);
+    },
+  });
+
+  const myMember = members?.find((member) => member.user_id === userId);
+  const effective = currentNickname === '' ? (myMember?.nickname ?? '') : currentNickname;
+
+  const onSubmit = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+    if (userId === undefined) {
+      return;
+    }
+    setSaved(false);
+    save.mutate(nickname.trim());
+  };
+
+  return (
+    <SettingsSection
+      title={t('settings.servers.nickname.title')}
+      description={t('settings.servers.nickname.description')}
+    >
+      <p className="mt-2 text-sm text-fg-muted">
+        {t('settings.servers.nickname.current')}{' '}
+        <span className="font-medium text-fg">
+          {effective === '' ? t('settings.servers.nickname.none') : effective}
+        </span>
+      </p>
+      <form className="mt-4 flex flex-col gap-4" onSubmit={onSubmit} noValidate>
+        <Field
+          label={t('settings.servers.nickname.label')}
+          placeholder={t('settings.servers.nickname.placeholder')}
+          name="guild_nickname"
+          value={nickname}
+          maxLength={32}
+          disabled={userId === undefined}
+          onChange={(event) => setNickname(event.target.value)}
+        />
+
+        {save.isError ? <ErrorNotice error={save.error} /> : null}
+        {saved && !save.isError ? (
+          <p role="status" className="text-sm text-success">
+            {t('settings.servers.nickname.saved')}
+          </p>
+        ) : null}
+
+        <div className="flex justify-end">
+          <Button type="submit" disabled={save.isPending || userId === undefined}>
+            {t(save.isPending ? 'common.saving' : 'common.save')}
+          </Button>
+        </div>
+      </form>
+    </SettingsSection>
+  );
+}

web/src/pages/settings/GuildRolesSection.tsx

@@ -0,0 +1,67 @@
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import { fetchRoles, guildRolesQueryKey } from '@/api/guilds';
+import { ErrorNotice } from '@/components/ui/ErrorNotice';
+import { SkeletonLines } from '@/components/ui/Skeleton';
+import { roleColorHex } from '@/lib/format';
+import { SettingsSection } from '@/pages/settings/SettingsSection';
+
+interface GuildRolesSectionProps {
+  guildId: string;
+}
+
+/** «Роли»: цвет и позиция. В Фазе 1 — только чтение. */
+export function GuildRolesSection({ guildId }: GuildRolesSectionProps) {
+  const { t } = useTranslation();
+
+  const roles = useQuery({
+    queryKey: guildRolesQueryKey(guildId),
+    queryFn: ({ signal }) => fetchRoles(guildId, signal),
+    retry: 0,
+  });
+
+  const sorted = (roles.data ?? []).slice().sort((left, right) => right.position - left.position);
+
+  return (
+    <SettingsSection
+      title={t('settings.servers.roles.title')}
+      description={t('settings.servers.roles.description')}
+    >
+      {roles.isPending ? (
+        <SkeletonLines className="mt-4" rows={3} />
+      ) : roles.isError ? (
+        <ErrorNotice className="mt-4" error={roles.error} onRetry={() => void roles.refetch()} />
+      ) : sorted.length === 0 ? (
+        <p className="mt-4 text-sm text-fg-muted">{t('settings.servers.roles.empty')}</p>
+      ) : (
+        <ul className="gl-stagger mt-4 flex flex-col gap-1" data-testid="guild-roles">
+          {sorted.map((role) => {
+            const color = roleColorHex(role.color);
+            return (
+              <li
+                key={role.id}
+                className="flex items-center gap-3 rounded-[var(--radius-md)] px-2 py-1.5 transition-colors duration-[var(--duration-fast)] hover:bg-surface-2"
+              >
+                <span
+                  aria-hidden="true"
+                  className="h-3.5 w-3.5 shrink-0 rounded-full border border-border/60"
+                  style={color === null ? undefined : { backgroundColor: color }}
+                />
+                <span className="min-w-0 flex-1 truncate text-sm">{role.name}</span>
+                {role.is_default ? (
+                  <span className="text-xs text-fg-muted">
+                    {t('settings.servers.roles.default')}
+                  </span>
+                ) : null}
+                <span className="text-xs text-fg-muted">
+                  {t('settings.servers.roles.position', { position: role.position })}
+                </span>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </SettingsSection>
+  );
+}

web/src/pages/settings/SettingsLayout.tsx

@@ -1,23 +1,17 @@
-import { Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
-import { NavLink, Outlet } from 'react-router';
+import { NavLink, Outlet, useLocation } from 'react-router';
 
-import { RouteFallback } from '@/App';
-import { useCurrentUser } from '@/lib/hooks';
+import { SettingsSwitcher } from '@/pages/settings/SettingsSwitcher';
+import { SettingsSuspense } from '@/pages/settings/SettingsSection';
 
-/** Каркас настроек: вкладки профиля, безопасности, внешнего вида и инстанса. */
+/**
+ * Каркас настроек: две соседние кнопки-раздела («Настройки сервера» и
+ * «Мои серверы») и содержимое активного раздела. Переключение разделов —
+ * обычная навигация react-router, без перезагрузки страницы.
+ */
 export default function SettingsLayout() {
   const { t } = useTranslation();
-  const currentUser = useCurrentUser();
-
-  const tabs = [
-    { to: 'profile', label: t('settings.tabs.profile') },
-    { to: 'security', label: t('settings.tabs.security') },
-    { to: 'appearance', label: t('settings.tabs.appearance') },
-    ...(currentUser.data?.is_instance_admin === true
-      ? [{ to: 'instance', label: t('settings.tabs.instance') }]
-      : []),
-  ];
+  const location = useLocation();
 
   return (
     <div className="mx-auto flex min-h-full w-full max-w-3xl flex-col gap-5 px-4 py-8">
@@ -28,27 +22,14 @@ export default function SettingsLayout() {
         </NavLink>
       </header>
 
-      <nav aria-label={t('settings.tabs.label')} className="flex flex-wrap gap-2">
-        {tabs.map((tab) => (
-          <NavLink
-            key={tab.to}
-            to={tab.to}
-            className={({ isActive }) =>
-              `rounded-[var(--radius-md)] border px-3 py-1.5 text-sm ${
-                isActive
-                  ? 'border-accent bg-surface-3 text-fg'
-                  : 'border-border/60 bg-surface-1 text-fg-muted hover:text-fg'
-              }`
-            }
-          >
-            {tab.label}
-          </NavLink>
-        ))}
-      </nav>
+      <SettingsSwitcher />
 
-      <Suspense fallback={<RouteFallback />}>
-        <Outlet />
-      </Suspense>
+      {/* Ключ по пути: при смене вкладки/раздела контент появляется с анимацией. */}
+      <div key={location.pathname} className="gl-page flex flex-col gap-5">
+        <SettingsSuspense>
+          <Outlet />
+        </SettingsSuspense>
+      </div>
     </div>
   );
 }

web/src/pages/settings/SettingsSection.tsx

@@ -0,0 +1,47 @@
+import { Suspense, type ReactNode } from 'react';
+
+import { Card } from '@/components/ui/primitives';
+import { SkeletonLines } from '@/components/ui/Skeleton';
+
+interface SettingsSectionProps {
+  title: string;
+  description?: string | undefined;
+  children: ReactNode;
+  /** Дополнительные классы карточки (например, акцент опасной зоны). */
+  className?: string;
+}
+
+/**
+ * Секция настроек: одна и та же карточка с заголовком и пояснением —
+ * и в настройках аккаунта, и в настройках сервера.
+ */
+export function SettingsSection({
+  title,
+  description,
+  children,
+  className = '',
+}: SettingsSectionProps) {
+  return (
+    <Card className={className}>
+      <h2 className="text-lg font-semibold">{title}</h2>
+      {description === undefined ? null : (
+        <p className="mt-1 text-sm text-fg-muted">{description}</p>
+      )}
+      {children}
+    </Card>
+  );
+}
+
+/** Заглушка на время загрузки ленивой вкладки настроек. */
+export function SettingsSectionFallback() {
+  return (
+    <Card>
+      <SkeletonLines rows={5} />
+    </Card>
+  );
+}
+
+/** Общая suspense-обёртка вкладок настроек. */
+export function SettingsSuspense({ children }: { children: ReactNode }) {
+  return <Suspense fallback={<SettingsSectionFallback />}>{children}</Suspense>;
+}

web/src/pages/settings/SettingsSwitcher.tsx

@@ -0,0 +1,45 @@
+import { useTranslation } from 'react-i18next';
+import { NavLink, useLocation } from 'react-router';
+
+/**
+ * Сегментированный переключатель разделов настроек: две соседние кнопки
+ * «Настройки сервера» (аккаунт и инстанс) и «Мои серверы». Подложка активной
+ * кнопки переезжает без перезагрузки страницы.
+ */
+export function SettingsSwitcher() {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const onServers = location.pathname.startsWith('/settings/servers');
+
+  const items = [
+    { to: '/settings/account/profile', label: t('settings.switcher.account'), active: !onServers },
+    { to: '/settings/servers', label: t('settings.switcher.servers'), active: onServers },
+  ];
+
+  return (
+    <nav
+      aria-label={t('settings.switcher.label')}
+      className="relative grid grid-cols-2 rounded-[var(--radius-lg)] border border-border/60 bg-surface-1 p-1"
+    >
+      <span
+        aria-hidden="true"
+        data-testid="settings-switcher-backdrop"
+        className={`pointer-events-none absolute inset-y-1 left-1 w-[calc(50%-0.25rem)] rounded-[var(--radius-md)] bg-surface-3 shadow-[var(--shadow-1)] transition-transform duration-[var(--duration-base)] ease-[var(--ease-out)] ${
+          onServers ? 'translate-x-full' : 'translate-x-0'
+        }`}
+      />
+      {items.map((item) => (
+        <NavLink
+          key={item.to}
+          to={item.to}
+          aria-current={item.active ? 'page' : undefined}
+          className={`relative z-10 rounded-[var(--radius-md)] px-3 py-1.5 text-center text-sm font-medium transition-colors duration-[var(--duration-fast)] ${
+            item.active ? 'text-fg' : 'text-fg-muted hover:text-fg'
+          }`}
+        >
+          {item.label}
+        </NavLink>
+      ))}
+    </nav>
+  );
+}

web/src/router.tsx

@@ -2,6 +2,7 @@ import { createBrowserRouter, Navigate } from 'react-router';
 
 import { AuthGuard } from '@/components/AuthGuard';
 import {
+  AccountSettingsLayout,
   AppearanceSettingsPage,
   AppLayout,
   IndexRedirect,
@@ -13,6 +14,7 @@ import {
   ProfileSettingsPage,
   RegisterPage,
   SecuritySettingsPage,
+  ServersSettingsPage,
   SettingsLayout,
   StatusPage,
 } from '@/pages/lazyPages';
@@ -52,11 +54,30 @@ export const routes = [
             path: 'settings',
             element: <SettingsLayout />,
             children: [
-              { index: true, element: <Navigate to="profile" replace /> },
-              { path: 'profile', element: <ProfileSettingsPage /> },
-              { path: 'security', element: <SecuritySettingsPage /> },
-              { path: 'appearance', element: <AppearanceSettingsPage /> },
-              { path: 'instance', element: <InstanceSettingsPage /> },
+              { index: true, element: <Navigate to="/settings/account/profile" replace /> },
+              {
+                // Настройки аккаунта и инстанса: /settings/account/*
+                path: 'account',
+                element: <AccountSettingsLayout />,
+                children: [
+                  { index: true, element: <Navigate to="profile" replace /> },
+                  { path: 'profile', element: <ProfileSettingsPage /> },
+                  { path: 'security', element: <SecuritySettingsPage /> },
+                  { path: 'appearance', element: <AppearanceSettingsPage /> },
+                  { path: 'instance', element: <InstanceSettingsPage /> },
+                ],
+              },
+              // Настройки пользовательских серверов: /settings/servers/:guildId
+              { path: 'servers', element: <ServersSettingsPage /> },
+              { path: 'servers/:guildId', element: <ServersSettingsPage /> },
+              // Старые пути Фазы 1: закладки и внешние ссылки продолжают работать.
+              { path: 'profile', element: <Navigate to="/settings/account/profile" replace /> },
+              { path: 'security', element: <Navigate to="/settings/account/security" replace /> },
+              {
+                path: 'appearance',
+                element: <Navigate to="/settings/account/appearance" replace />,
+              },
+              { path: 'instance', element: <Navigate to="/settings/account/instance" replace /> },
             ],
           },
         ],

web/src/stores/session.ts

@@ -22,6 +22,8 @@ interface SessionState {
   sessionId: string | null;
   selectedGuildId: string | null;
   selectedChannelId: string | null;
+  /** Последний сервер, открытый в настройках (`/settings/servers/:guildId`). */
+  settingsGuildId: string | null;
 
   applyReady: (snapshot: GatewaySnapshot) => void;
   /** RESUMED приходит без снапшота — обновляем только то, что пришло. */
@@ -34,6 +36,8 @@ interface SessionState {
   upsertGuild: (guild: GuildSummary) => void;
   /** GUILD_UPDATE: имя сервера (описание в снапшоте Фазы 1 не хранится). */
   renameGuild: (guildId: string, name: string) => void;
+  /** Свой никнейм на сервере (PATCH /guilds/{id}/members/{me}). */
+  setMyNickname: (guildId: string, nickname: string) => void;
   removeGuild: (guildId: string) => void;
   setGuildChannels: (guildId: string, channels: Channel[]) => void;
   upsertChannel: (guildId: string, channel: Channel) => void;
@@ -43,6 +47,8 @@ interface SessionState {
   firstChannelId: (guildId: string) => string | null;
   selectGuild: (guildId: string | null) => void;
   selectChannel: (guildId: string | null, channelId: string | null) => void;
+  /** Выбор сервера в настройках — отдельно от выбора в приложении. */
+  selectSettingsGuild: (guildId: string | null) => void;
   reset: () => void;
 }
 
@@ -53,6 +59,7 @@ interface SessionDefaults {
   sessionId: null;
   selectedGuildId: null;
   selectedChannelId: null;
+  settingsGuildId: null;
 }
 
 const defaults: SessionDefaults = {
@@ -62,6 +69,7 @@ const defaults: SessionDefaults = {
   sessionId: null,
   selectedGuildId: null,
   selectedChannelId: null,
+  settingsGuildId: null,
 };
 
 function toSessionGuild(guild: GatewayGuild): SessionGuild {
@@ -177,6 +185,14 @@ export const useSessionStore = create<SessionState>((set, get) => ({
     });
   },
 
+  setMyNickname: (guildId, nickname) => {
+    set({
+      guilds: get().guilds.map((guild) =>
+        guild.id === guildId ? { ...guild, my_nickname: nickname } : guild,
+      ),
+    });
+  },
+
   removeGuild: (guildId) => {
     const state = get();
     const guilds = state.guilds.filter((guild) => guild.id !== guildId);
@@ -243,6 +259,10 @@ export const useSessionStore = create<SessionState>((set, get) => ({
     set({ selectedGuildId: guildId, selectedChannelId: channelId });
   },
 
+  selectSettingsGuild: (guildId) => {
+    set({ settingsGuildId: guildId });
+  },
+
   reset: () => {
     set({ ...defaults });
   },