grendervill
4c8f888b3e
Правки пользователя: - в «Профиль → Основной» сверху квадратный аватар слева, справа от него настройки имени, «О себе», состояния и эмодзи во всю высоту; смена аватара — клик по нему, форматы (JPEG, PNG, WebP, GIF до 8 МБ) — в подсказке; - убраны дубли: часовой пояс только в «Язык и регион», статус — только в мини-профиле панели; - панель пользователя переехала в нижний левый угол под сайдбар, подсказка о выходе из сервера — на её прежнее место; панель ужата под 240 px; - шестерёнка сервера открывает новый пункт настроек «Сервер» (список серверов, общее, участники, роли, опасная зона), а «Профиль → Сервер» оставлен только для ника и «Применить ко всем серверам»; - окно настроек получило статический размер 70% рабочей области со скроллом; - ID пользователей скрыты везде, кроме раздела «Инстанс» у администратора; - список друзей свёрнут под кнопкой «Друзья (N)» и раскрывается снизу вверх; - 249 тестов Vitest (было 239), check/lint/test/build зелёные.
430 lines
17 KiB
TypeScript
430 lines
17 KiB
TypeScript
import { useCallback, useRef, useState, type ReactNode, type RefObject } from 'react';
|
|
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { useTranslation } from 'react-i18next';
|
|
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 { Popover } from '@/components/ui/Popover';
|
|
import { VolumeSlider, VoiceDeviceList } from '@/components/voice/VoiceControls';
|
|
import { useCurrentUser } from '@/lib/hooks';
|
|
import { useApiErrorMessage } from '@/lib/useApiErrorMessage';
|
|
import { useDeviceChoice } from '@/lib/useMediaDevices';
|
|
import { useGatewayStore } from '@/stores/gateway';
|
|
import { useMessagesStore } from '@/stores/messages';
|
|
import { useSessionStore } from '@/stores/session';
|
|
import { useUiStore } from '@/stores/ui';
|
|
import { useVoiceStore } from '@/stores/voice';
|
|
import { SettingsModal } from '@/pages/settings/SettingsModal';
|
|
|
|
/** Статусы, которые можно выставить из мини-профиля: «не в сети» сервер выводит сам. */
|
|
const selectableStatuses = userStatuses.filter((value) => value !== 'offline');
|
|
|
|
/** Цвет точки статуса — тот же, что в списках участников. */
|
|
const statusDotClass: Record<UserStatus, string> = {
|
|
online: 'bg-success',
|
|
idle: 'bg-warning',
|
|
dnd: 'bg-danger',
|
|
invisible: 'bg-fg-muted',
|
|
offline: 'bg-fg-muted',
|
|
};
|
|
|
|
/** Иконка с перечёркиванием для выключенного состояния (как в мессенджерах). */
|
|
function PanelIcon({ glyph, off }: { glyph: string; off: boolean }) {
|
|
return (
|
|
<span aria-hidden="true" className="relative inline-block leading-none">
|
|
<span className={off ? 'opacity-60' : ''}>{glyph}</span>
|
|
{off ? (
|
|
<span className="pointer-events-none absolute left-1/2 top-1/2 h-[1.5px] w-5 -translate-x-1/2 -translate-y-1/2 -rotate-45 rounded-full bg-current" />
|
|
) : null}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
interface PanelControlProps {
|
|
glyph: string;
|
|
/** Включено ли устройство: от этого зависит вид и подпись кнопки. */
|
|
enabled: boolean;
|
|
/** Подпись кнопки-переключателя (озвучивает текущее действие). */
|
|
toggleLabel: string;
|
|
/** Подпись стрелки и поповера. */
|
|
menuLabel: string;
|
|
onToggle: () => void;
|
|
open: boolean;
|
|
onOpenMenu: () => void;
|
|
onCloseMenu: () => void;
|
|
children: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Кнопка устройства со стрелкой слева: сама кнопка переключает состояние,
|
|
* стрелка открывает поповер с устройствами и громкостью. Это две отдельные
|
|
* кнопки, поэтому выпадающий список не перекрывает переключатель.
|
|
*/
|
|
function PanelControl({
|
|
glyph,
|
|
enabled,
|
|
toggleLabel,
|
|
menuLabel,
|
|
onToggle,
|
|
open,
|
|
onOpenMenu,
|
|
onCloseMenu,
|
|
children,
|
|
}: PanelControlProps) {
|
|
const anchorRef: RefObject<HTMLButtonElement | null> = useRef(null);
|
|
|
|
return (
|
|
<div className="relative flex items-center">
|
|
{/* Узкая стрелка: панель шириной 240px, место здесь на счету. */}
|
|
<button
|
|
type="button"
|
|
aria-haspopup="dialog"
|
|
aria-expanded={open}
|
|
aria-label={menuLabel}
|
|
title={menuLabel}
|
|
onClick={onOpenMenu}
|
|
className="rounded-[var(--radius-sm)] px-0.5 text-[8px] leading-none text-fg-muted transition-colors duration-[var(--duration-fast)] hover:bg-surface-3 hover:text-fg active:scale-95"
|
|
>
|
|
▾
|
|
</button>
|
|
<button
|
|
ref={anchorRef}
|
|
type="button"
|
|
aria-pressed={enabled}
|
|
aria-label={toggleLabel}
|
|
title={toggleLabel}
|
|
onClick={onToggle}
|
|
className={`rounded-[var(--radius-sm)] px-1 py-1 text-base leading-none transition-[color,background-color,transform] duration-[var(--duration-fast)] hover:bg-surface-3 active:scale-95 ${
|
|
enabled ? 'text-fg' : 'text-danger'
|
|
}`}
|
|
>
|
|
<PanelIcon glyph={glyph} off={!enabled} />
|
|
</button>
|
|
|
|
<Popover
|
|
open={open}
|
|
label={menuLabel}
|
|
anchorRef={anchorRef}
|
|
align="right"
|
|
className="w-64 max-w-[70vw]"
|
|
onClose={onCloseMenu}
|
|
>
|
|
{children}
|
|
</Popover>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Панель пользователя внизу сайдбара: одна «подложка» с двумя зонами.
|
|
*
|
|
* Слева — аватар, имя, статус и мини-профиль (статус, настройки, выход),
|
|
* справа — микрофон, камера, наушники (каждое со своим поповером устройств)
|
|
* и шестерёнка, открывающая модальное окно настроек.
|
|
*/
|
|
export function UserPanel() {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const queryClient = useQueryClient();
|
|
const currentUser = useCurrentUser();
|
|
const describeError = useApiErrorMessage();
|
|
const sessionUser = useSessionStore((state) => state.user);
|
|
const disconnect = useGatewayStore((state) => state.disconnect);
|
|
const openSettings = useUiStore((state) => state.openSettings);
|
|
|
|
const micEnabled = useVoiceStore((state) => state.micEnabled);
|
|
const cameraEnabled = useVoiceStore((state) => state.cameraEnabled);
|
|
const headphonesEnabled = useVoiceStore((state) => state.headphonesEnabled);
|
|
const toggleMic = useVoiceStore((state) => state.toggleMic);
|
|
const toggleCamera = useVoiceStore((state) => state.toggleCamera);
|
|
const toggleHeadphones = useVoiceStore((state) => state.toggleHeadphones);
|
|
const micVolume = useVoiceStore((state) => state.micVolume);
|
|
const outputVolume = useVoiceStore((state) => state.outputVolume);
|
|
const setMicVolume = useVoiceStore((state) => state.setMicVolume);
|
|
const setOutputVolume = useVoiceStore((state) => state.setOutputVolume);
|
|
const mic = useDeviceChoice('audioinput');
|
|
const camera = useDeviceChoice('videoinput');
|
|
const output = useDeviceChoice('audiooutput');
|
|
|
|
const [profileOpen, setProfileOpen] = useState(false);
|
|
/** Какое устройство сейчас раскрыто в поповере: одновременно только одно. */
|
|
const [openControl, setOpenControl] = useState<'mic' | 'camera' | 'headphones' | null>(null);
|
|
const profileRef = useRef<HTMLButtonElement | null>(null);
|
|
|
|
const name = sessionUser?.display_name ?? currentUser.data?.display_name ?? '';
|
|
const username = sessionUser?.username ?? currentUser.data?.username ?? '';
|
|
const bio = currentUser.data?.bio ?? '';
|
|
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 ?? '';
|
|
const seed = currentUser.data?.id ?? sessionUser?.id ?? username;
|
|
const avatarFileId = sessionUser?.avatar_file_id ?? currentUser.data?.avatar_file_id;
|
|
|
|
const signOut = useMutation({
|
|
mutationFn: () => logout(),
|
|
onSuccess: () => {
|
|
// Сессия в cookie уже погашена — сбрасываем локальное состояние.
|
|
disconnect();
|
|
useSessionStore.getState().reset();
|
|
// Сообщения тоже привязаны к пользователю: чужой истории в памяти быть не должно.
|
|
useMessagesStore.getState().reset();
|
|
queryClient.clear();
|
|
void navigate('/login', { replace: true });
|
|
},
|
|
});
|
|
|
|
const changeStatus = useMutation({
|
|
mutationFn: (next: UserStatus) => updateProfile({ status: next }),
|
|
onSuccess: (updated) => {
|
|
queryClient.setQueryData(currentUserQueryKey, updated);
|
|
useSessionStore.getState().patchUser(updated);
|
|
setProfileOpen(false);
|
|
},
|
|
});
|
|
|
|
const statusLabel = userStatuses.includes(status)
|
|
? t(`user.status.${status}`)
|
|
: t('user.status.offline');
|
|
|
|
const toggleProfile = useCallback(() => {
|
|
setOpenControl(null);
|
|
setProfileOpen((value) => !value);
|
|
}, []);
|
|
const closeProfile = useCallback(() => setProfileOpen(false), []);
|
|
|
|
/** Открыть поповер устройства: мини-профиль при этом закрывается. */
|
|
const toggleControl = useCallback((control: 'mic' | 'camera' | 'headphones') => {
|
|
setProfileOpen(false);
|
|
setOpenControl((current) => (current === control ? null : control));
|
|
}, []);
|
|
|
|
const openAudioSettings = (): void => {
|
|
setOpenControl(null);
|
|
openSettings({ section: 'voice' });
|
|
};
|
|
|
|
const goToSettings = (target: { section?: 'profile'; tab?: 'main' | 'server' }): void => {
|
|
setProfileOpen(false);
|
|
openSettings(target);
|
|
};
|
|
|
|
const error = changeStatus.error ?? signOut.error;
|
|
const errorText = error === null || error === undefined ? null : describeError(error);
|
|
|
|
return (
|
|
<footer
|
|
aria-label={t('user.panelLabel')}
|
|
className="relative border-t border-border/40 bg-surface-2/80 p-2"
|
|
>
|
|
{/* Подложка панели: слева профиль, справа кнопки устройств и настроек. */}
|
|
<div className="flex items-center gap-0.5 rounded-[var(--radius-md)] border border-border/60 bg-surface-1 px-1.5 py-1.5">
|
|
<button
|
|
ref={profileRef}
|
|
type="button"
|
|
aria-haspopup="menu"
|
|
aria-expanded={profileOpen}
|
|
aria-label={t('user.menu.open')}
|
|
onClick={toggleProfile}
|
|
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"
|
|
>
|
|
<span className="relative shrink-0">
|
|
<Avatar name={displayName} seed={seed} fileId={avatarFileId} size="sm" />
|
|
<span
|
|
aria-hidden="true"
|
|
data-testid="user-status-dot"
|
|
className={`absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full border-2 border-surface-1 ${statusDotClass[status]}`}
|
|
/>
|
|
</span>
|
|
<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>
|
|
</button>
|
|
|
|
<PanelControl
|
|
glyph="🎤"
|
|
enabled={micEnabled}
|
|
toggleLabel={t(micEnabled ? 'user.voice.micOff' : 'user.voice.micOn')}
|
|
menuLabel={t('user.voice.micSettings')}
|
|
onToggle={toggleMic}
|
|
open={openControl === 'mic'}
|
|
onOpenMenu={() => toggleControl('mic')}
|
|
onCloseMenu={() => setOpenControl(null)}
|
|
>
|
|
<VoiceDeviceList
|
|
kind="audioinput"
|
|
label={t('user.voice.input')}
|
|
value={mic.value}
|
|
onChange={mic.select}
|
|
/>
|
|
<VolumeSlider
|
|
label={t('user.voice.micVolume')}
|
|
value={micVolume}
|
|
onChange={setMicVolume}
|
|
/>
|
|
<AudioSettingsLink label={t('user.voice.audioSettings')} onOpen={openAudioSettings} />
|
|
</PanelControl>
|
|
|
|
<PanelControl
|
|
glyph="🎥"
|
|
enabled={cameraEnabled}
|
|
toggleLabel={t(cameraEnabled ? 'user.voice.cameraOff' : 'user.voice.cameraOn')}
|
|
menuLabel={t('user.voice.cameraSettings')}
|
|
onToggle={toggleCamera}
|
|
open={openControl === 'camera'}
|
|
onOpenMenu={() => toggleControl('camera')}
|
|
onCloseMenu={() => setOpenControl(null)}
|
|
>
|
|
<VoiceDeviceList
|
|
kind="videoinput"
|
|
label={t('user.voice.camera')}
|
|
value={camera.value}
|
|
onChange={camera.select}
|
|
/>
|
|
<AudioSettingsLink label={t('user.voice.audioSettings')} onOpen={openAudioSettings} />
|
|
</PanelControl>
|
|
|
|
<PanelControl
|
|
glyph="🎧"
|
|
enabled={headphonesEnabled}
|
|
toggleLabel={t(headphonesEnabled ? 'user.voice.soundOff' : 'user.voice.soundOn')}
|
|
menuLabel={t('user.voice.soundSettings')}
|
|
onToggle={toggleHeadphones}
|
|
open={openControl === 'headphones'}
|
|
onOpenMenu={() => toggleControl('headphones')}
|
|
onCloseMenu={() => setOpenControl(null)}
|
|
>
|
|
<VoiceDeviceList
|
|
kind="audiooutput"
|
|
label={t('user.voice.output')}
|
|
value={output.value}
|
|
onChange={output.select}
|
|
/>
|
|
<VolumeSlider
|
|
label={t('user.voice.outputVolume')}
|
|
value={outputVolume}
|
|
onChange={setOutputVolume}
|
|
/>
|
|
<AudioSettingsLink label={t('user.voice.audioSettings')} onOpen={openAudioSettings} />
|
|
</PanelControl>
|
|
|
|
<button
|
|
type="button"
|
|
aria-label={t('user.settings')}
|
|
title={t('user.settings')}
|
|
className="rounded-[var(--radius-sm)] px-1 py-1 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={() => {
|
|
setOpenControl(null);
|
|
goToSettings({ section: 'profile', tab: 'main' });
|
|
}}
|
|
>
|
|
<span aria-hidden="true">⚙</span>
|
|
</button>
|
|
</div>
|
|
|
|
<Menu
|
|
open={profileOpen}
|
|
label={t('user.menu.label')}
|
|
onClose={closeProfile}
|
|
anchorRef={profileRef}
|
|
className="w-64"
|
|
>
|
|
{/* Мини-профиль: аватар, имя, логин и «О себе». */}
|
|
<div
|
|
role="presentation"
|
|
className="flex flex-col gap-2 border-b border-border/60 px-2 pb-2"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Avatar name={displayName} seed={seed} fileId={avatarFileId} size="lg" />
|
|
<div className="min-w-0">
|
|
<p className="truncate text-sm font-semibold">{displayName}</p>
|
|
<p className="truncate text-xs text-fg-muted">@{username}</p>
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-fg-muted">{bio === '' ? t('user.menu.noBio') : bio}</p>
|
|
</div>
|
|
|
|
<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}
|
|
alwaysShowIcon
|
|
icon={
|
|
<span
|
|
className={`inline-block h-2.5 w-2.5 rounded-full ${statusDotClass[value]}`}
|
|
/>
|
|
}
|
|
disabled={changeStatus.isPending}
|
|
onClick={() => {
|
|
changeStatus.reset();
|
|
changeStatus.mutate(value);
|
|
}}
|
|
>
|
|
{t(`user.status.${value}`)}
|
|
</MenuItem>
|
|
))}
|
|
</div>
|
|
|
|
<MenuSeparator />
|
|
<MenuItem icon="👤" onClick={() => goToSettings({ section: 'profile', tab: 'main' })}>
|
|
{t('user.menu.account')}
|
|
</MenuItem>
|
|
<MenuItem icon="🗄" onClick={() => goToSettings({ section: 'profile', tab: 'server' })}>
|
|
{t('user.menu.guilds')}
|
|
</MenuItem>
|
|
<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-1 pt-2 text-xs text-danger">
|
|
{errorText}
|
|
</p>
|
|
)}
|
|
|
|
{/* Окно настроек живёт здесь же: панель — единственная точка входа. */}
|
|
<SettingsModal />
|
|
</footer>
|
|
);
|
|
}
|
|
|
|
/** Ссылка «Аудио-видео настройки» в поповере: открывает окно настроек. */
|
|
function AudioSettingsLink({ label, onOpen }: { label: string; onOpen: () => void }) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onOpen}
|
|
className="mt-2 w-full border-t border-border/60 px-1 pt-2 text-left text-xs text-accent underline decoration-accent/40 underline-offset-2 hover:decoration-accent"
|
|
>
|
|
{label}
|
|
</button>
|
|
);
|
|
}
|