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-клиентами.
2026-09-19 23:32:11 +03:00
parent 4550bea6cc
commit e4ffbb05a5
30 changed files with 3182 additions and 106 deletions
@@ -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>
  );
 }
@@ -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'));
@@ -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>
+    </>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
  );
 }
@@ -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>;
+}
@@ -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>
+  );
+}