feat(web): профиль с аватаром, панель в углу, настройки сервера, скрытые ID
Правки пользователя: - в «Профиль → Основной» сверху квадратный аватар слева, справа от него настройки имени, «О себе», состояния и эмодзи во всю высоту; смена аватара — клик по нему, форматы (JPEG, PNG, WebP, GIF до 8 МБ) — в подсказке; - убраны дубли: часовой пояс только в «Язык и регион», статус — только в мини-профиле панели; - панель пользователя переехала в нижний левый угол под сайдбар, подсказка о выходе из сервера — на её прежнее место; панель ужата под 240 px; - шестерёнка сервера открывает новый пункт настроек «Сервер» (список серверов, общее, участники, роли, опасная зона), а «Профиль → Сервер» оставлен только для ника и «Применить ко всем серверам»; - окно настроек получило статический размер 70% рабочей области со скроллом; - ID пользователей скрыты везде, кроме раздела «Инстанс» у администратора; - список друзей свёрнут под кнопкой «Друзья (N)» и раскрывается снизу вверх; - 249 тестов Vitest (было 239), check/lint/test/build зелёные.
This commit is contained in:
@@ -87,7 +87,7 @@ function PanelControl({
|
||||
aria-label={menuLabel}
|
||||
title={menuLabel}
|
||||
onClick={onOpenMenu}
|
||||
className="rounded-[var(--radius-sm)] px-0.5 text-[9px] leading-none text-fg-muted transition-colors duration-[var(--duration-fast)] hover:bg-surface-3 hover:text-fg active:scale-95"
|
||||
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>
|
||||
@@ -98,7 +98,7 @@ function PanelControl({
|
||||
aria-label={toggleLabel}
|
||||
title={toggleLabel}
|
||||
onClick={onToggle}
|
||||
className={`rounded-[var(--radius-sm)] px-1 py-1 text-sm leading-none transition-[color,background-color,transform] duration-[var(--duration-fast)] hover:bg-surface-3 active:scale-95 ${
|
||||
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'
|
||||
}`}
|
||||
>
|
||||
@@ -110,7 +110,7 @@ function PanelControl({
|
||||
label={menuLabel}
|
||||
anchorRef={anchorRef}
|
||||
align="right"
|
||||
className="w-72"
|
||||
className="w-64 max-w-[70vw]"
|
||||
onClose={onCloseMenu}
|
||||
>
|
||||
{children}
|
||||
@@ -191,14 +191,6 @@ export function UserPanel() {
|
||||
? t(`user.status.${status}`)
|
||||
: t('user.status.offline');
|
||||
|
||||
const onCopyId = useCallback(() => {
|
||||
if (currentUser.data === undefined) {
|
||||
return;
|
||||
}
|
||||
void navigator.clipboard?.writeText(currentUser.data.id);
|
||||
setProfileOpen(false);
|
||||
}, [currentUser.data]);
|
||||
|
||||
const toggleProfile = useCallback(() => {
|
||||
setOpenControl(null);
|
||||
setProfileOpen((value) => !value);
|
||||
@@ -241,7 +233,7 @@ export function UserPanel() {
|
||||
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="md" />
|
||||
<Avatar name={displayName} seed={seed} fileId={avatarFileId} size="sm" />
|
||||
<span
|
||||
aria-hidden="true"
|
||||
data-testid="user-status-dot"
|
||||
@@ -334,7 +326,7 @@ export function UserPanel() {
|
||||
type="button"
|
||||
aria-label={t('user.settings')}
|
||||
title={t('user.settings')}
|
||||
className="rounded-[var(--radius-sm)] px-1 py-1 text-sm leading-none text-fg-muted transition-[color,background-color,transform] duration-[var(--duration-fast)] hover:bg-surface-3 hover:text-fg active:scale-95"
|
||||
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' });
|
||||
@@ -397,9 +389,6 @@ export function UserPanel() {
|
||||
<MenuItem icon="🗄" onClick={() => goToSettings({ section: 'profile', tab: 'server' })}>
|
||||
{t('user.menu.guilds')}
|
||||
</MenuItem>
|
||||
<MenuItem icon="#" onClick={onCopyId}>
|
||||
{t('user.copyId')}
|
||||
</MenuItem>
|
||||
<MenuSeparator />
|
||||
<MenuItem
|
||||
danger
|
||||
|
||||
Reference in New Issue
Block a user