arch: move web folder into api & move api to top level

frontend/src/shared/components/ProfileIcon/index.tsx

@@ -0,0 +1,45 @@
+import React, { useRef } from 'react';
+import styled from 'styled-components';
+
+export const Container = styled.div<{ size: number | string; bgColor: string | null; backgroundURL: string | null }>`
+  width: ${props => props.size}px;
+  height: ${props => props.size}px;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-weight: 700;
+  background: ${props => (props.backgroundURL ? `url(${props.backgroundURL})` : props.bgColor)};
+  background-position: center;
+  background-size: contain;
+`;
+
+type ProfileIconProps = {
+  user: TaskUser;
+  onProfileClick: ($target: React.RefObject<HTMLElement>, user: TaskUser) => void;
+  size: number | string;
+};
+
+const ProfileIcon: React.FC<ProfileIconProps> = ({ user, onProfileClick, size }) => {
+  const $profileRef = useRef<HTMLDivElement>(null);
+  return (
+    <Container
+      ref={$profileRef}
+      onClick={() => {
+        onProfileClick($profileRef, user);
+      }}
+      size={size}
+      backgroundURL={user.profileIcon.url ?? null}
+      bgColor={user.profileIcon.bgColor ?? null}
+    >
+      {(!user.profileIcon.url && user.profileIcon.initials) ?? ''}
+    </Container>
+  );
+};
+
+ProfileIcon.defaultProps = {
+  size: 28,
+};
+
+export default ProfileIcon;