49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Text } from 'folds';
|
|
import { SidebarItem, SidebarItemTooltip, SidebarAvatar } from '../../../components/sidebar';
|
|
import { UserAvatar } from '../../../components/user-avatar';
|
|
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
|
import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
|
|
import { nameInitials } from '../../../utils/common';
|
|
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
|
import { Settings } from '../../../features/settings';
|
|
import { useUserProfile } from '../../../hooks/useUserProfile';
|
|
import { Modal500 } from '../../../components/Modal500';
|
|
|
|
export function SettingsTab() {
|
|
const mx = useMatrixClient();
|
|
const useAuthentication = useMediaAuthentication();
|
|
const userId = mx.getUserId()!;
|
|
const profile = useUserProfile(userId);
|
|
|
|
const [settings, setSettings] = useState(false);
|
|
|
|
const displayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
|
|
const avatarUrl = profile.avatarUrl
|
|
? mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined
|
|
: undefined;
|
|
|
|
const openSettings = () => setSettings(true);
|
|
const closeSettings = () => setSettings(false);
|
|
|
|
return (
|
|
<SidebarItem active={settings}>
|
|
<SidebarItemTooltip tooltip="User Settings">
|
|
{(triggerRef) => (
|
|
<SidebarAvatar as="button" ref={triggerRef} onClick={openSettings}>
|
|
<UserAvatar
|
|
userId={userId}
|
|
src={avatarUrl}
|
|
renderFallback={() => <Text size="H4">{nameInitials(displayName)}</Text>}
|
|
/>
|
|
</SidebarAvatar>
|
|
)}
|
|
</SidebarItemTooltip>
|
|
{settings && (
|
|
<Modal500 requestClose={closeSettings}>
|
|
<Settings requestClose={closeSettings} />
|
|
</Modal500>
|
|
)}
|
|
</SidebarItem>
|
|
);
|
|
}
|