New AvatarPopup component

ts/components/AvatarPopup.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { LocalizerType } from '../types/Util';
+import { Avatar, Props as AvatarProps } from './Avatar';
+
+import { isEmpty } from 'lodash';
+
+export type Props = {
+  readonly i18n: LocalizerType;
+
+  onViewPreferences: () => unknown;
+  onViewArchive: () => unknown;
+
+  // Matches Popper's RefHandler type
+  innerRef?: (ref: HTMLElement | null) => void;
+  style: React.CSSProperties;
+} & AvatarProps;
+
+export const AvatarPopup = (props: Props) => {
+  const {
+    i18n,
+    profileName,
+    phoneNumber,
+    onViewPreferences,
+    onViewArchive,
+    style,
+  } = props;
+
+  const hasProfileName = !isEmpty(profileName);
+
+  return (
+    <div style={style} className="module-avatar-popup">
+      <div className="module-avatar-popup__profile">
+        <Avatar {...props} size={52} />
+        <div className="module-avatar-popup__profile__text">
+          <div className="module-avatar-popup__profile__name">
+            {hasProfileName ? profileName : phoneNumber}
+          </div>
+          {hasProfileName ? (
+            <div className="module-avatar-popup__profile__number">
+              {phoneNumber}
+            </div>
+          ) : null}
+        </div>
+      </div>
+      <hr className="module-avatar-popup__divider" />
+      <button className="module-avatar-popup__item" onClick={onViewPreferences}>
+        <div
+          className={classNames(
+            'module-avatar-popup__item__icon',
+            'module-avatar-popup__item__icon-settings'
+          )}
+        />
+        <div className="module-avatar-popup__item__text">
+          {i18n('mainMenuSettings')}
+        </div>
+      </button>
+      <button className="module-avatar-popup__item" onClick={onViewArchive}>
+        <div
+          className={classNames(
+            'module-avatar-popup__item__icon',
+            'module-avatar-popup__item__icon-archive'
+          )}
+        />
+        <div className="module-avatar-popup__item__text">
+          {i18n('avatarMenuViewArchive')}
+        </div>
+      </button>
+    </div>
+  );
+};