feat(web): владелец группы меняет иконку беседы (Фаза 7)

D-070: иконка группы приходит полем `icon_file_id` — у группы это её файл, у
1:1 по-прежнему аватар собеседника. Разбор беседы из REST вынесен в
`parseChannelPayload`: групповые поля и иконка не теряются, а у группы без
иконки поле очищается, чтобы не остался чужой аватар.

`api/dmIcon.ts` грузит и снимает иконку multipart-запросом (FormData уже умеет
общий `request`). В шапке групповой беседы у владельца появилось меню «Иконка
беседы»: загрузить или удалить; ответ сервера сразу кладётся в стор бесед, а
список перечитывается — снятая иконка приходит пустым полем (AGENT.md 7.8,
11.6). Строки добавлены в ru и en.

web/src/api/dmIcon.ts

@@ -0,0 +1,40 @@
+import { request } from './client';
+import { parseChannelPayload } from './friends';
+import type { Channel } from './types';
+
+/**
+ * Иконка групповой беседы (AGENT.md §7.8, D-070).
+ *
+ * Иконка — обычная загрузка с назначением `dm_icon` (D-042), поэтому тело
+ * запроса — multipart, а `request()` уже умеет `FormData`. Менять иконку может
+ * только владелец беседы; ответ — обновлённая беседа в общем формате
+ * `dmChannelPayload`, как у переименования.
+ */
+
+function payloadChannel(value: unknown): Channel {
+  const channel = parseChannelPayload(value);
+  if (channel === null) {
+    throw new Error('malformed group channel payload');
+  }
+  return channel;
+}
+
+/** `POST /channels/{id}/icon` — загрузить иконку беседы (владелец). */
+export async function uploadDmIcon(channelId: string, file: File): Promise<Channel> {
+  const form = new FormData();
+  form.append('file', file);
+  const payload = await request<{ channel?: unknown }>(
+    `/channels/${encodeURIComponent(channelId)}/icon`,
+    { method: 'POST', form },
+  );
+  return payloadChannel(payload.channel);
+}
+
+/** `DELETE /channels/{id}/icon` — снять иконку беседы (владелец). */
+export async function deleteDmIcon(channelId: string): Promise<Channel> {
+  const payload = await request<{ channel?: unknown }>(
+    `/channels/${encodeURIComponent(channelId)}/icon`,
+    { method: 'DELETE' },
+  );
+  return payloadChannel(payload.channel);
+}

web/src/api/friends.ts

@@ -277,12 +277,7 @@ export async function fetchDirectChannels(signal?: AbortSignal): Promise<Channel
     return [];
   }
   return payload.channels
-    .map((item) => {
-      const record = asRecord(item);
-      const channel = parseDirectChannel(item);
-      // Групповая беседа: имя и состав приходят полями канала, а не recipient.
-      return record === null || channel === null ? null : withGroupFields(channel, record);
-    })
+    .map((item) => parseChannelPayload(item))
     .filter((item): item is Channel => item !== null);
 }
 
@@ -324,6 +319,15 @@ function withGroupFields(channel: Channel, record: Record<string, unknown>): Cha
   if (ownerId !== undefined) {
     channel.owner_id = ownerId;
   }
+  // Иконка группы — своя загрузка (D-070): у 1:1 в этом поле аватар
+  // собеседника, поэтому у группы без иконки поле очищается, а не остаётся
+  // чужим аватаром.
+  const icon = asString(record['icon_file_id']);
+  if (icon !== undefined) {
+    channel.icon_file_id = icon;
+  } else {
+    delete channel.icon_file_id;
+  }
   if (Array.isArray(record['recipients'])) {
     channel.recipients = record['recipients']
       .map(parseDmRecipient)
@@ -332,6 +336,19 @@ function withGroupFields(channel: Channel, record: Record<string, unknown>): Cha
   return channel;
 }
 
+/**
+ * Разбирает беседу из ответа API: 1:1 и группа идут общим путём, поэтому
+ * групповые поля и иконка не теряются (AGENT.md §7.8).
+ */
+export function parseChannelPayload(value: unknown): Channel | null {
+  const record = asRecord(value);
+  const channel = parseDirectChannel(value);
+  if (record === null || channel === null) {
+    return null;
+  }
+  return withGroupFields(channel, record);
+}
+
 /** `POST /users/@me/channels/group` — создать групповую беседу (7.8). */
 export async function createGroupDirectChannel(
   name: string,
@@ -341,12 +358,11 @@ export async function createGroupDirectChannel(
     method: 'POST',
     body: { name, recipient_ids: recipientIds },
   });
-  const record = asRecord(payload.channel);
-  const channel = parseDirectChannel(payload.channel);
-  if (record === null || channel === null) {
+  const channel = parseChannelPayload(payload.channel);
+  if (channel === null) {
     throw new Error('malformed group channel payload');
   }
-  return withGroupFields(channel, record);
+  return channel;
 }
 
 /** `PUT /channels/{id}/recipients/{user_id}` — добавить участника в группу. */
@@ -355,12 +371,11 @@ export async function addGroupRecipient(channelId: string, userId: string): Prom
     `/channels/${channelId}/recipients/${userId}`,
     { method: 'PUT' },
   );
-  const record = asRecord(payload.channel);
-  const channel = parseDirectChannel(payload.channel);
-  if (record === null || channel === null) {
+  const channel = parseChannelPayload(payload.channel);
+  if (channel === null) {
     throw new Error('malformed group channel payload');
   }
-  return withGroupFields(channel, record);
+  return channel;
 }
 
 /** `DELETE /channels/{id}/recipients/{user_id}` — выйти или удалить участника. */
@@ -374,12 +389,11 @@ export async function renameGroupDirectChannel(channelId: string, name: string):
     method: 'PATCH',
     body: { name },
   });
-  const record = asRecord(payload.channel);
-  const channel = parseDirectChannel(payload.channel);
-  if (record === null || channel === null) {
+  const channel = parseChannelPayload(payload.channel);
+  if (channel === null) {
     throw new Error('malformed group channel payload');
   }
-  return withGroupFields(channel, record);
+  return channel;
 }
 
 /** `POST /users/@me/channels` — открыть (или создать) беседу с пользователем. */

web/src/api/types.ts

@@ -103,8 +103,9 @@ export interface Channel {
   permission_overwrites?: ChannelOverwrite[];
   /**
    * Поля личной беседы (`type: 'dm'`): id собеседника, его аватар и видимый
-   * статус. В снапшоте READY аватар приходит как `icon_file_id`, в REST-списке
-   * бесед — внутри `recipient`.
+   * статус. Аватар собеседника приходит и как `icon_file_id` (READY и
+   * REST-список бесед), а у группы в этом поле лежит её собственная иконка
+   * (AGENT.md 7.8, D-070).
    */
   recipient_id?: string;
   icon_file_id?: string;

web/src/components/friends/DirectMessageView.tsx

@@ -1,14 +1,20 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { deleteDmIcon, uploadDmIcon } from '@/api/dmIcon';
 import type { Message } from '@/api/messages';
+import type { Channel } from '@/api/types';
 import { ChatView } from '@/components/chat/ChatView';
 import { PinsPanel } from '@/components/chat/PinsPanel';
 import { SearchPanel } from '@/components/chat/SearchPanel';
 import { useAuthorDirectory } from '@/components/chat/useAuthorDirectory';
 import { Avatar } from '@/components/ui/Avatar';
+import { ErrorNotice } from '@/components/ui/ErrorNotice';
+import { Menu, MenuItem } from '@/components/ui/Menu';
 import { Card } from '@/components/ui/primitives';
 import { SkeletonLines } from '@/components/ui/Skeleton';
+import { useCurrentUser } from '@/lib/hooks';
 import { presenceDotClass } from '@/lib/presence';
 import { useMessagesStore } from '@/stores/messages';
 import { useSessionStore } from '@/stores/session';
@@ -27,6 +33,38 @@ export function DirectMessageView({ channelId }: { channelId: string }) {
     ),
   );
   const reloadDmChannels = useSessionStore((state) => state.reloadDmChannels);
+  const upsertDmChannel = useSessionStore((state) => state.upsertDmChannel);
+  const currentUser = useCurrentUser();
+
+  // Иконку групповой беседы меняет только владелец (D-070): у 1:1 своей
+  // иконки нет — там показывается аватар собеседника.
+  const isOwner = channel?.is_group === true && channel.owner_id === currentUser.data?.id;
+  const [iconMenuOpen, setIconMenuOpen] = useState(false);
+  const [iconError, setIconError] = useState<unknown>(null);
+  const iconMenuRef = useRef<HTMLButtonElement | null>(null);
+  const iconInput = useRef<HTMLInputElement | null>(null);
+
+  // Ответ сервера кладём в стор бесед: иконка появляется сразу и у владельца,
+  // а остальным участникам приходит DM_CHANNEL_UPDATE (AGENT.md 11.6). Список
+  // перечитываем ещё и запросом: снятая иконка приходит пустым полем, а
+  // слияние в сторе пустое поле не затирает.
+  const applyUpdated = (updated: Channel): void => {
+    setIconError(null);
+    upsertDmChannel(updated);
+    void reloadDmChannels();
+  };
+
+  const uploadIcon = useMutation({
+    mutationFn: (file: File) => uploadDmIcon(channelId, file),
+    onSuccess: applyUpdated,
+    onError: (cause) => setIconError(cause),
+  });
+
+  const removeIcon = useMutation({
+    mutationFn: () => deleteDmIcon(channelId),
+    onSuccess: applyUpdated,
+    onError: (cause) => setIconError(cause),
+  });
 
   // Прямая ссылка на беседу: список приходит снапшотом, но после перезагрузки
   // страницы его может ещё не быть — подстраховываемся REST-запросом.
@@ -115,6 +153,38 @@ export function DirectMessageView({ channelId }: { channelId: string }) {
           <span className="sr-only">{t(`user.status.${status}`)}</span>
         )}
         <div className="ml-auto flex items-center gap-1">
+          {isOwner ? (
+            <>
+              <button
+                ref={iconMenuRef}
+                type="button"
+                aria-haspopup="menu"
+                aria-expanded={iconMenuOpen}
+                aria-label={t('friends.group.icon.menu')}
+                title={t('friends.group.icon.menu')}
+                data-testid="dm-icon-menu"
+                className="rounded-[var(--radius-sm)] px-1.5 text-base leading-none text-fg-muted transition-[color,background-color,transform] duration-[var(--duration-fast)] hover:bg-surface-3 hover:text-fg active:scale-95"
+                onClick={() => setIconMenuOpen((open) => !open)}
+              >
+                🖼
+              </button>
+              <input
+                ref={iconInput}
+                type="file"
+                accept="image/*"
+                className="hidden"
+                data-testid="dm-icon-input"
+                onChange={(event) => {
+                  const file = event.target.files?.[0];
+                  if (file !== undefined) {
+                    uploadIcon.mutate(file);
+                  }
+                  // Иначе повторный выбор того же файла не сработает.
+                  event.target.value = '';
+                }}
+              />
+            </>
+          ) : null}
           <button
             type="button"
             aria-label={t('chat.search.open')}
@@ -137,6 +207,49 @@ export function DirectMessageView({ channelId }: { channelId: string }) {
         </div>
       </header>
 
+      {isOwner ? (
+        <Menu
+          open={iconMenuOpen}
+          label={t('friends.group.icon.menu')}
+          anchorRef={iconMenuRef}
+          placement="bottom"
+          align="right"
+          onClose={() => setIconMenuOpen(false)}
+        >
+          <MenuItem
+            icon="🖼"
+            data-testid="dm-icon-upload"
+            disabled={uploadIcon.isPending}
+            onClick={() => {
+              setIconMenuOpen(false);
+              iconInput.current?.click();
+            }}
+          >
+            {t('friends.group.icon.upload')}
+          </MenuItem>
+          {channel.icon_file_id === undefined ? null : (
+            <MenuItem
+              danger
+              icon="✖"
+              data-testid="dm-icon-remove"
+              disabled={removeIcon.isPending}
+              onClick={() => {
+                setIconMenuOpen(false);
+                removeIcon.mutate();
+              }}
+            >
+              {t('friends.group.icon.remove')}
+            </MenuItem>
+          )}
+        </Menu>
+      ) : null}
+
+      {iconError === null ? null : (
+        <div className="px-4 pt-2">
+          <ErrorNotice error={iconError} />
+        </div>
+      )}
+
       <SearchPanel
         channelId={channel.id}
         open={searchOpen}

web/src/i18n/locales/en.json

@@ -435,7 +435,12 @@
       "membersHint": "Pick at least two friends:",
       "create": "Create",
       "members": "Members: {{count}}",
-      "open": "Open the group “{{name}}”, members: {{count}}"
+      "open": "Open the group “{{name}}”, members: {{count}}",
+      "icon": {
+        "menu": "Conversation icon",
+        "upload": "Upload icon",
+        "remove": "Remove icon"
+      }
     },
     "friendsSection": "Friends",
     "friendsEmpty": "Your friend list is empty.",

web/src/i18n/locales/ru.json

@@ -435,7 +435,12 @@
       "membersHint": "Выберите минимум двух друзей:",
       "create": "Создать",
       "members": "Участников: {{count}}",
-      "open": "Открыть группу «{{name}}», участников: {{count}}"
+      "open": "Открыть группу «{{name}}», участников: {{count}}",
+      "icon": {
+        "menu": "Иконка беседы",
+        "upload": "Загрузить иконку",
+        "remove": "Удалить иконку"
+      }
     },
     "friendsSection": "Друзья",
     "friendsEmpty": "Список друзей пуст.",

web/tests/dmIcon.test.tsx

@@ -0,0 +1,293 @@
+import { describe, expect, it } from 'vitest';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import type { Relationships } from '@/api/friends';
+import {
+  findRequest,
+  installFetch,
+  installGatewaySocket,
+  json,
+  makeReadySnapshot,
+  makeUser,
+  renderApp,
+  requestUrl,
+  type FetchRoute,
+} from './helpers';
+
+/**
+ * Иконка групповой беседы (AGENT.md 7.8, D-070): показ в списке бесед и в
+ * шапке, меню владельца (загрузить/удалить) и обновление без перезагрузки.
+ */
+
+const user = makeUser();
+
+const instance = {
+  instance: {
+    name: 'glchat-test',
+    registration_enabled: true,
+    allow_guild_creation: true,
+    max_guilds_per_user: 5,
+    main_guild_id: 'g-main',
+  },
+};
+
+const friends: Relationships = {
+  friends: [
+    {
+      user_id: 'user-2',
+      username: 'bob',
+      display_name: 'Боб',
+      status: 'online',
+      visible_status: 'online',
+      is_instance_admin: false,
+      badges: [],
+      timezone: 'Europe/Moscow',
+      relationship: 'friend',
+    },
+  ],
+  incoming: [],
+  outgoing: [],
+  blocked: [],
+};
+
+/** Групповая беседа в REST-форме: владелец и иконка настраиваются. */
+function groupChannel(options: { ownerId?: string; iconFileId?: string } = {}) {
+  const channel: Record<string, unknown> = {
+    id: 'dm-group-1',
+    type: 'dm',
+    is_group: true,
+    name: 'Игровая',
+    member_count: 3,
+    owner_id: options.ownerId ?? user.id,
+    can_send: true,
+    can_view: true,
+    recipients: [
+      {
+        user_id: user.id,
+        username: 'alice',
+        display_name: 'Alice',
+        status: 'online',
+        visible_status: 'online',
+        is_owner: options.ownerId === undefined,
+        is_self: true,
+      },
+      {
+        user_id: 'user-2',
+        username: 'bob',
+        display_name: 'Боб',
+        status: 'online',
+        visible_status: 'online',
+        is_owner: false,
+        is_self: false,
+      },
+      {
+        user_id: 'user-3',
+        username: 'carol',
+        display_name: 'Кэрол',
+        status: 'offline',
+        visible_status: 'offline',
+        is_owner: false,
+        is_self: false,
+      },
+    ],
+  };
+  if (options.iconFileId !== undefined) {
+    channel['icon_file_id'] = options.iconFileId;
+  }
+  return channel;
+}
+
+function imageFile(): File {
+  const file = new File(['картинка'], 'icon.png', { type: 'image/png' });
+  Object.defineProperty(file, 'size', { value: 1024 });
+  return file;
+}
+
+/**
+ * Маршруты приложения: список бесед отдаётся из изменяемого состояния — так
+ * тест видит, что сервер уже принял новую иконку.
+ */
+function dmRoutes(current: () => unknown[], extra: FetchRoute[] = []): FetchRoute[] {
+  return [
+    ...extra,
+    { match: '/api/v1/users/@me/relationships', response: () => json(friends) },
+    { match: '/api/v1/users/@me/guilds', response: () => json({ guilds: [] }) },
+    {
+      match: '/api/v1/channels/dm-group-1/messages',
+      response: () => json({ messages: [] }),
+    },
+    { match: '/api/v1/channels/dm-group-1/pins', response: () => json({ messages: [] }) },
+    {
+      match: '/api/v1/channels/dm-group-1/ack',
+      method: 'POST',
+      response: () => json({ ok: true }),
+    },
+    { match: '/api/v1/users/@me/channels', response: () => json({ channels: current() }) },
+    { match: '/api/v1/users/@me', response: () => json({ user }) },
+    { match: '/api/v1/instance', response: () => json(instance) },
+  ];
+}
+
+/** Открывает беседу и ждёт её отрисовки в сайдбаре. */
+async function openGroup(channelId = 'dm-group-1') {
+  renderApp(`/app/friends/${channelId}`);
+  const gateway = installGatewaySocket(makeReadySnapshot());
+  await gateway.greet();
+  await screen.findByTestId('dm-group-header');
+  return gateway;
+}
+
+describe('иконка групповой беседы', () => {
+  it('иконка группы видна в списке бесед и в шапке', async () => {
+    const channels = [groupChannel({ iconFileId: '777' })];
+    installFetch(dmRoutes(() => channels));
+    await openGroup();
+
+    const link = await screen.findByTestId('dm-link-dm-group-1');
+    await waitFor(() => {
+      expect(link.querySelector('img')).toHaveAttribute('src', '/files/777');
+    });
+    expect(screen.getByTestId('dm-group-header').querySelector('img')).toHaveAttribute(
+      'src',
+      '/files/777',
+    );
+  });
+
+  it('меню иконки есть у владельца и отсутствует у участника', async () => {
+    const channels = [groupChannel({ iconFileId: '777' })];
+    installFetch(dmRoutes(() => channels));
+    await openGroup();
+
+    const menu = await screen.findByTestId('dm-icon-menu');
+    await userEvent.click(menu);
+    expect(await screen.findByTestId('dm-icon-upload')).toBeVisible();
+    // Иконка уже есть: пункт удаления тоже доступен владельцу.
+    expect(screen.getByTestId('dm-icon-remove')).toBeVisible();
+  });
+
+  it('участник-не-владелец не видит меню иконки, но видит саму иконку', async () => {
+    // Владелец беседы — Боб, текущий пользователь (Alice) только участник.
+    const channels = [groupChannel({ ownerId: 'user-2', iconFileId: '777' })];
+    installFetch(dmRoutes(() => channels));
+    await openGroup();
+
+    expect(screen.queryByTestId('dm-icon-menu')).toBeNull();
+    expect(screen.getByTestId('dm-group-header').querySelector('img')).toHaveAttribute(
+      'src',
+      '/files/777',
+    );
+  });
+
+  it('владелец загружает иконку: список и шапка обновляются сразу', async () => {
+    let channels = [groupChannel()];
+    const fetchMock = installFetch(
+      dmRoutes(
+        () => channels,
+        [
+          {
+            match: '/api/v1/channels/dm-group-1/icon',
+            method: 'POST',
+            response: () => {
+              const updated = groupChannel({ iconFileId: '888' });
+              channels = [updated];
+              return json({ channel: updated });
+            },
+          },
+        ],
+      ),
+    );
+    await openGroup();
+
+    // До загрузки иконки нет: аватар рисуется инициалами.
+    const link = await screen.findByTestId('dm-link-dm-group-1');
+    expect(link.querySelector('img')).toBeNull();
+
+    await userEvent.click(await screen.findByTestId('dm-icon-menu'));
+    await userEvent.click(screen.getByTestId('dm-icon-upload'));
+    // Диалог выбора файла в jsdom не открывается: файл кладём в поле напрямую.
+    await userEvent.upload(screen.getByTestId('dm-icon-input'), imageFile());
+
+    await waitFor(() => {
+      expect(
+        findRequest(fetchMock, { url: '/channels/dm-group-1/icon', method: 'POST' }),
+      ).toBeDefined();
+    });
+    // Файл уходит multipart-телом.
+    const call = fetchMock.mock.calls.find(
+      ([input, init]) =>
+        requestUrl(input).includes('/channels/dm-group-1/icon') &&
+        (init?.method ?? 'GET').toUpperCase() === 'POST',
+    );
+    expect(call?.[1]?.body).toBeInstanceOf(FormData);
+
+    await waitFor(() => {
+      expect(link.querySelector('img')).toHaveAttribute('src', '/files/888');
+    });
+    expect(screen.getByTestId('dm-group-header').querySelector('img')).toHaveAttribute(
+      'src',
+      '/files/888',
+    );
+  });
+
+  it('владелец удаляет иконку: она пропадает из списка и шапки', async () => {
+    let channels = [groupChannel({ iconFileId: '777' })];
+    const fetchMock = installFetch(
+      dmRoutes(
+        () => channels,
+        [
+          {
+            match: '/api/v1/channels/dm-group-1/icon',
+            method: 'DELETE',
+            response: () => {
+              const updated = groupChannel();
+              channels = [updated];
+              return json({ channel: updated });
+            },
+          },
+        ],
+      ),
+    );
+    await openGroup();
+
+    const link = await screen.findByTestId('dm-link-dm-group-1');
+    await waitFor(() => {
+      expect(link.querySelector('img')).toHaveAttribute('src', '/files/777');
+    });
+
+    await userEvent.click(await screen.findByTestId('dm-icon-menu'));
+    await userEvent.click(screen.getByTestId('dm-icon-remove'));
+
+    await waitFor(() => {
+      expect(
+        findRequest(fetchMock, { url: '/channels/dm-group-1/icon', method: 'DELETE' }),
+      ).toBeDefined();
+    });
+    await waitFor(() => {
+      expect(link.querySelector('img')).toBeNull();
+    });
+    expect(screen.getByTestId('dm-group-header').querySelector('img')).toBeNull();
+  });
+
+  it('событие DM_CHANNEL_UPDATE доносит новую иконку без перезагрузки', async () => {
+    let channels = [groupChannel()];
+    installFetch(dmRoutes(() => channels));
+    const gateway = await openGroup();
+
+    const link = await screen.findByTestId('dm-link-dm-group-1');
+    expect(link.querySelector('img')).toBeNull();
+
+    // Иконку поставил владелец (возможно, с другого устройства): сервер
+    // сообщает об изменении беседы событием (AGENT.md 11.6, D-070).
+    channels = [groupChannel({ iconFileId: '999' })];
+    gateway.dispatch('DM_CHANNEL_UPDATE', { channel_id: 'dm-group-1' });
+
+    await waitFor(() => {
+      expect(link.querySelector('img')).toHaveAttribute('src', '/files/999');
+    });
+    expect(screen.getByTestId('dm-group-header').querySelector('img')).toHaveAttribute(
+      'src',
+      '/files/999',
+    );
+  });
+});