feat(web): переименование групповой беседы кнопкой (Фаза 7)
Пункт «Переименовать» в меню владельца в шапке групповой беседы и диалог с
текущим именем: `PATCH /channels/{id}` (D-075) уже был, интерфейса не было.
Ответ сервера кладём в стор бесед — имя меняется и в шапке, и в списке; при
отказе окно остаётся открытым с причиной, пустое имя отправить нельзя.
Меню владельца было меню иконки: теперь это общее меню беседы (⋯) с
переименованием, загрузкой и снятием иконки — прежние testid иконки смотрят
на те же пункты, поэтому обновлены только ссылки на само меню.
i18n ru/en, Vitest: `web/tests/dmRename.test.tsx` (переименование, пустое имя,
отмена и черновик, отказ сервера, права участника, DM_CHANNEL_UPDATE без
перезагрузки) и обновлённые ссылки в `web/tests/dmIcon.test.tsx`.
This commit is contained in:
@@ -12,6 +12,7 @@ import { useAuthorDirectory } from '@/components/chat/useAuthorDirectory';
|
||||
import { DmCallHistoryPanel } from '@/components/friends/DmCallHistoryPanel';
|
||||
import { DmCallMenu } from '@/components/friends/DmCallMenu';
|
||||
import { DmCallPanel } from '@/components/friends/DmCallPanel';
|
||||
import { GroupRenameDialog } from '@/components/friends/GroupRenameDialog';
|
||||
import { Avatar } from '@/components/ui/Avatar';
|
||||
import { ErrorNotice } from '@/components/ui/ErrorNotice';
|
||||
import { Menu, MenuItem } from '@/components/ui/Menu';
|
||||
@@ -40,18 +41,19 @@ export function DirectMessageView({ channelId }: { channelId: string }) {
|
||||
const upsertDmChannel = useSessionStore((state) => state.upsertDmChannel);
|
||||
const currentUser = useCurrentUser();
|
||||
|
||||
// Иконку групповой беседы меняет только владелец (D-070): у 1:1 своей
|
||||
// иконки нет — там показывается аватар собеседника.
|
||||
// Иконку и имя групповой беседы меняет только владелец (D-070, D-075): у 1:1
|
||||
// своей иконки нет — там показывается аватар собеседника.
|
||||
const isOwner = channel?.is_group === true && channel.owner_id === currentUser.data?.id;
|
||||
const [iconMenuOpen, setIconMenuOpen] = useState(false);
|
||||
const [ownerMenuOpen, setOwnerMenuOpen] = useState(false);
|
||||
const [renameOpen, setRenameOpen] = useState(false);
|
||||
const [iconError, setIconError] = useState<unknown>(null);
|
||||
const iconMenuRef = useRef<HTMLButtonElement | null>(null);
|
||||
const ownerMenuRef = useRef<HTMLButtonElement | null>(null);
|
||||
const iconInput = useRef<HTMLInputElement | null>(null);
|
||||
|
||||
// Ответ сервера кладём в стор бесед: иконка появляется сразу и у владельца,
|
||||
// а остальным участникам приходит DM_CHANNEL_UPDATE (AGENT.md 11.6). Список
|
||||
// перечитываем ещё и запросом: снятая иконка приходит пустым полем, а
|
||||
// слияние в сторе пустое поле не затирает.
|
||||
// Ответ сервера кладём в стор бесед: новое имя или иконка появляются сразу и
|
||||
// у владельца, а остальным участникам приходит DM_CHANNEL_UPDATE (AGENT.md
|
||||
// 11.6). Список перечитываем ещё и запросом: снятая иконка приходит пустым
|
||||
// полем, а слияние в сторе пустое поле не затирает.
|
||||
const applyUpdated = (updated: Channel): void => {
|
||||
setIconError(null);
|
||||
upsertDmChannel(updated);
|
||||
@@ -178,17 +180,17 @@ export function DirectMessageView({ channelId }: { channelId: string }) {
|
||||
{isOwner ? (
|
||||
<>
|
||||
<button
|
||||
ref={iconMenuRef}
|
||||
ref={ownerMenuRef}
|
||||
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"
|
||||
aria-expanded={ownerMenuOpen}
|
||||
aria-label={t('friends.group.menu')}
|
||||
title={t('friends.group.menu')}
|
||||
data-testid="dm-owner-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)}
|
||||
onClick={() => setOwnerMenuOpen((open) => !open)}
|
||||
>
|
||||
🖼
|
||||
⋯
|
||||
</button>
|
||||
<input
|
||||
ref={iconInput}
|
||||
@@ -231,19 +233,29 @@ export function DirectMessageView({ channelId }: { channelId: string }) {
|
||||
|
||||
{isOwner ? (
|
||||
<Menu
|
||||
open={iconMenuOpen}
|
||||
label={t('friends.group.icon.menu')}
|
||||
anchorRef={iconMenuRef}
|
||||
open={ownerMenuOpen}
|
||||
label={t('friends.group.menu')}
|
||||
anchorRef={ownerMenuRef}
|
||||
placement="bottom"
|
||||
align="right"
|
||||
onClose={() => setIconMenuOpen(false)}
|
||||
onClose={() => setOwnerMenuOpen(false)}
|
||||
>
|
||||
<MenuItem
|
||||
icon="✏️"
|
||||
data-testid="dm-group-rename"
|
||||
onClick={() => {
|
||||
setOwnerMenuOpen(false);
|
||||
setRenameOpen(true);
|
||||
}}
|
||||
>
|
||||
{t('friends.group.rename')}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon="🖼"
|
||||
data-testid="dm-icon-upload"
|
||||
disabled={uploadIcon.isPending}
|
||||
onClick={() => {
|
||||
setIconMenuOpen(false);
|
||||
setOwnerMenuOpen(false);
|
||||
iconInput.current?.click();
|
||||
}}
|
||||
>
|
||||
@@ -256,7 +268,7 @@ export function DirectMessageView({ channelId }: { channelId: string }) {
|
||||
data-testid="dm-icon-remove"
|
||||
disabled={removeIcon.isPending}
|
||||
onClick={() => {
|
||||
setIconMenuOpen(false);
|
||||
setOwnerMenuOpen(false);
|
||||
removeIcon.mutate();
|
||||
}}
|
||||
>
|
||||
@@ -266,6 +278,15 @@ export function DirectMessageView({ channelId }: { channelId: string }) {
|
||||
</Menu>
|
||||
) : null}
|
||||
|
||||
{isOwner ? (
|
||||
<GroupRenameDialog
|
||||
channel={channel}
|
||||
open={renameOpen}
|
||||
onClose={() => setRenameOpen(false)}
|
||||
onRenamed={applyUpdated}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{iconError === null ? null : (
|
||||
<div className="px-4 pt-2">
|
||||
<ErrorNotice error={iconError} />
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { renameGroupDirectChannel } from '@/api/friends';
|
||||
import type { Channel } from '@/api/types';
|
||||
import { ErrorNotice } from '@/components/ui/ErrorNotice';
|
||||
import { Field } from '@/components/ui/Field';
|
||||
import { Modal } from '@/components/ui/Modal';
|
||||
import { Button } from '@/components/ui/primitives';
|
||||
|
||||
/**
|
||||
* Переименование групповой беседы (AGENT.md 7.8, Фаза 7): имя задаёт владелец
|
||||
* через `PATCH /channels/{id}`, остальным участникам его приносит
|
||||
* `DM_CHANNEL_UPDATE`. Сервер требует 1–64 символа, поэтому пустое имя
|
||||
* отправить нельзя — кнопка сохранения заблокирована.
|
||||
*/
|
||||
export function GroupRenameDialog({
|
||||
channel,
|
||||
open,
|
||||
onClose,
|
||||
onRenamed,
|
||||
}: {
|
||||
channel: Channel;
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
/** Ответ сервера: беседа с новым именем — кладём в стор и список бесед. */
|
||||
onRenamed: (updated: Channel) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [name, setName] = useState(channel.name);
|
||||
const formRef = useRef<HTMLFormElement | null>(null);
|
||||
|
||||
const rename = useMutation({
|
||||
mutationFn: (value: string) => renameGroupDirectChannel(channel.id, value),
|
||||
onSuccess: (updated) => {
|
||||
onRenamed(updated);
|
||||
onClose();
|
||||
},
|
||||
});
|
||||
const { reset } = rename;
|
||||
|
||||
// Каждое открытие начинается с текущего имени: подстройка состояния под
|
||||
// изменившийся проп во время рендера (тот же приём, что в `Modal`), эффект
|
||||
// дал бы лишний кадр со старым черновиком.
|
||||
const [wasOpen, setWasOpen] = useState(open);
|
||||
if (wasOpen !== open) {
|
||||
setWasOpen(open);
|
||||
if (open) {
|
||||
setName(channel.name);
|
||||
}
|
||||
}
|
||||
|
||||
// Фокус ставим в поле: окно открывают ровно за тем, чтобы набрать имя.
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
formRef.current?.querySelector('input')?.focus();
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
const trimmed = name.trim();
|
||||
|
||||
/** Закрытие гасит отказ прошлой попытки: он не должен встречать при открытии. */
|
||||
const close = (): void => {
|
||||
reset();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const submit = (): void => {
|
||||
if (trimmed !== '' && !rename.isPending) {
|
||||
rename.mutate(trimmed);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
title={t('friends.group.renameTitle')}
|
||||
onClose={close}
|
||||
footer={
|
||||
<>
|
||||
<Button variant="ghost" onClick={close}>
|
||||
{t('common.cancel')}
|
||||
</Button>
|
||||
<Button onClick={submit} disabled={trimmed === '' || rename.isPending}>
|
||||
{t(rename.isPending ? 'common.saving' : 'common.save')}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form
|
||||
ref={formRef}
|
||||
data-testid="dm-rename-form"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
submit();
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
label={t('friends.group.name')}
|
||||
name="group_name"
|
||||
value={name}
|
||||
maxLength={64}
|
||||
placeholder={t('friends.group.namePlaceholder')}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
/>
|
||||
{rename.isError ? <ErrorNotice className="mt-3" error={rename.error} /> : null}
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -445,8 +445,10 @@
|
||||
"create": "Create",
|
||||
"members": "Members: {{count}}",
|
||||
"open": "Open the group “{{name}}”, members: {{count}}",
|
||||
"menu": "Conversation menu",
|
||||
"rename": "Rename",
|
||||
"renameTitle": "Rename conversation",
|
||||
"icon": {
|
||||
"menu": "Conversation icon",
|
||||
"upload": "Upload icon",
|
||||
"remove": "Remove icon"
|
||||
}
|
||||
|
||||
@@ -445,8 +445,10 @@
|
||||
"create": "Создать",
|
||||
"members": "Участников: {{count}}",
|
||||
"open": "Открыть группу «{{name}}», участников: {{count}}",
|
||||
"menu": "Меню беседы",
|
||||
"rename": "Переименовать",
|
||||
"renameTitle": "Переименовать беседу",
|
||||
"icon": {
|
||||
"menu": "Иконка беседы",
|
||||
"upload": "Загрузить иконку",
|
||||
"remove": "Удалить иконку"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user