cinny/src/app/components/user-profile/UserHero.tsx

import React, { useState } from 'react';
import {
  Avatar,
  Box,
  Icon,
  Icons,
  Modal,
  Overlay,
  OverlayBackdrop,
  OverlayCenter,
  Text,
} from 'folds';
import classNames from 'classnames';
import FocusTrap from 'focus-trap-react';
import * as css from './styles.css';
import { UserAvatar } from '../user-avatar';
import colorMXID from '../../../util/colorMXID';
import { getMxIdLocalPart } from '../../utils/matrix';
import { BreakWord, LineClamp2, LineClamp3 } from '../../styles/Text.css';
import { ModalMobileFull } from '../../styles/Modal.css';
import { UserPresence } from '../../hooks/useUserPresence';
import { AvatarPresence, PresenceBadge } from '../presence';
import { AvatarDecoration } from '../avatar-decoration/AvatarDecoration';
import { ImageViewer } from '../image-viewer';
import { stopPropagation } from '../../utils/keyboard';
import { useSetting } from '../../state/hooks/settings';
import { settingsAtom } from '../../state/settings';
import { useLocalTime } from '../../hooks/useLocalTime';

type UserHeroProps = {
  userId: string;
  avatarUrl?: string;
  presence?: UserPresence;
};
export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
  const [viewAvatar, setViewAvatar] = useState<string>();

  return (
    <Box direction="Column" className={css.UserHero}>
      <div
        className={css.UserHeroCoverContainer}
        style={{
          backgroundColor: colorMXID(userId),
          filter: avatarUrl ? undefined : 'brightness(50%)',
        }}
      >
        {avatarUrl && (
          <img className={css.UserHeroCover} src={avatarUrl} alt={userId} draggable="false" />
        )}
      </div>
      <div className={css.UserHeroAvatarContainer}>
        <div className={css.UserAvatarContainer}>
          <AvatarPresence
            badge={
              presence && <PresenceBadge presence={presence.presence} status={presence.status} />
            }
          >
            <AvatarDecoration userId={userId} inset={20}>
              <Avatar
                as={avatarUrl ? 'button' : 'div'}
                onClick={avatarUrl ? () => setViewAvatar(avatarUrl) : undefined}
                className={css.UserHeroAvatar}
                size="500"
              >
                <UserAvatar
                  className={css.UserHeroAvatarImg}
                  userId={userId}
                  src={avatarUrl}
                  alt={userId}
                  renderFallback={() => <Icon size="500" src={Icons.User} filled />}
                />
              </Avatar>
            </AvatarDecoration>
          </AvatarPresence>
        </div>
        {viewAvatar && (
          <Overlay open backdrop={<OverlayBackdrop />}>
            <OverlayCenter>
              <FocusTrap
                focusTrapOptions={{
                  initialFocus: false,
                  onDeactivate: () => setViewAvatar(undefined),
                  clickOutsideDeactivates: true,
                  escapeDeactivates: stopPropagation,
                }}
              >
                <Modal
                  size="500"
                  className={ModalMobileFull}
                  onContextMenu={(evt: any) => evt.stopPropagation()}
                >
                  <ImageViewer
                    src={viewAvatar}
                    alt={userId}
                    requestClose={() => setViewAvatar(undefined)}
                  />
                </Modal>
              </FocusTrap>
            </OverlayCenter>
          </Overlay>
        )}
      </div>
    </Box>
  );
}

type UserHeroNameProps = {
  displayName?: string;
  userId: string;
  status?: string;
  pronouns?: string;
  timezone?: string;
};
export function UserHeroName({
  displayName,
  userId,
  status,
  pronouns,
  timezone,
}: UserHeroNameProps) {
  const username = getMxIdLocalPart(userId);
  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
  const localTimeInfo = useLocalTime(timezone, !hour24Clock);

  return (
    <Box grow="Yes" direction="Column" gap="0">
      <Box alignItems="Baseline" gap="200" wrap="Wrap">
        <Text
          size="H4"
          className={classNames(BreakWord, LineClamp3)}
          title={displayName ?? username}
        >
          {displayName ?? username ?? userId}
        </Text>
      </Box>
      {pronouns && (
        <Box alignItems="Center" gap="100" style={{ marginTop: '1px', overflow: 'hidden' }}>
          <Text
            size="T200"
            className={classNames(BreakWord, LineClamp2)}
            style={{ opacity: 0.6, fontStyle: 'italic' }}
          >
            {pronouns}
          </Text>
        </Box>
      )}
      <Box alignItems="Center" gap="100" wrap="Wrap">
        <Text size="T200" className={classNames(BreakWord, LineClamp3)} title={username}>
          @{username}
        </Text>
      </Box>
      {localTimeInfo && (
        <Box alignItems="Center" gap="100" style={{ marginTop: '1px', overflow: 'hidden' }}>
          <Icon size="50" src={Icons.Clock} />
          <Text size="T200" className={classNames(BreakWord, LineClamp2)} style={{ opacity: 0.6 }}>
            {localTimeInfo.time}
            {localTimeInfo.abbr && <span style={{ opacity: 0.7 }}>{` ${localTimeInfo.abbr}`}</span>}
          </Text>
        </Box>
      )}
      {status && (
        <Box alignItems="Center" gap="100" style={{ marginTop: '2px', overflow: 'hidden' }}>
          <Text
            size="T200"
            className={classNames(BreakWord, LineClamp2)}
            style={{ opacity: 0.75, overflowWrap: 'anywhere' }}
          >
            {status}
          </Text>
        </Box>
      )}
    </Box>
  );
}