Remove usage of tiley (#4406)

* First pass

* Mooarrr

* lint

* snapshots

app/components/Avatar/Avatar.tsx

@@ -1,14 +1,21 @@
 import * as React from "react";
 import styled from "styled-components";
-import User from "~/models/User";
 import useBoolean from "~/hooks/useBoolean";
+import Initials from "./Initials";
 import placeholder from "./placeholder.png";
 
+export interface IAvatar {
+  avatarUrl: string | null;
+  color: string;
+  initial: string;
+  id: string;
+}
+
 type Props = {
-  src: string;
   size: number;
+  src?: string;
   icon?: React.ReactNode;
-  user?: User;
+  model?: IAvatar;
   alt?: string;
   showBorder?: boolean;
   onClick?: React.MouseEventHandler<HTMLImageElement>;
@@ -16,20 +23,28 @@ type Props = {
 };
 
 function Avatar(props: Props) {
-  const { src, icon, showBorder, ...rest } = props;
-
+  const { icon, showBorder, model, ...rest } = props;
+  const src = props.src || model?.avatarUrl;
   const [error, handleError] = useBoolean(false);
 
   return (
-    <AvatarWrapper>
-      <CircleImg
-        onError={handleError}
-        src={error ? placeholder : src}
-        $showBorder={showBorder}
-        {...rest}
-      />
+    <Relative>
+      {src ? (
+        <CircleImg
+          onError={handleError}
+          src={error ? placeholder : src}
+          $showBorder={showBorder}
+          {...rest}
+        />
+      ) : model ? (
+        <Initials color={model.color} $showBorder={showBorder} {...rest}>
+          {model.initial}
+        </Initials>
+      ) : (
+        <Initials $showBorder={showBorder} {...rest} />
+      )}
       {icon && <IconWrapper>{icon}</IconWrapper>}
-    </AvatarWrapper>
+    </Relative>
   );
 }
 
@@ -37,7 +52,7 @@ Avatar.defaultProps = {
   size: 24,
 };
 
-const AvatarWrapper = styled.div`
+const Relative = styled.div`
   position: relative;
 `;
 

app/components/Avatar/AvatarWithPresence.tsx

@@ -51,7 +51,7 @@ function AvatarWithPresence({
           $isObserving={isObserving}
           $color={user.color}
         >
-          <Avatar src={user.avatarUrl} onClick={onClick} size={32} />
+          <Avatar model={user} onClick={onClick} size={32} />
         </AvatarWrapper>
       </Tooltip>
     </>

app/components/Avatar/Initials.tsx

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+import Flex from "~/components/Flex";
+
+const Initials = styled(Flex)<{
+  color?: string;
+  size: number;
+  $showBorder?: boolean;
+}>`
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  background-color: ${(props) => props.color};
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+  border-radius: 50%;
+  border: 2px solid
+    ${(props) =>
+      props.$showBorder === false ? "transparent" : props.theme.background};
+  flex-shrink: 0;
+  font-size: ${(props) => props.size / 2}px;
+  font-weight: 500;
+`;
+
+export default Initials;

app/components/DocumentViews.tsx

@@ -43,10 +43,10 @@ function DocumentViews({ document, isOpen }: Props) {
         <PaginatedList
           aria-label={t("Viewers")}
           items={users}
-          renderItem={(item: User) => {
-            const view = documentViews.find((v) => v.user.id === item.id);
-            const isPresent = presentIds.includes(item.id);
-            const isEditing = editingIds.includes(item.id);
+          renderItem={(model: User) => {
+            const view = documentViews.find((v) => v.user.id === model.id);
+            const isPresent = presentIds.includes(model.id);
+            const isEditing = editingIds.includes(model.id);
             const subtitle = isPresent
               ? isEditing
                 ? t("Currently editing")
@@ -58,10 +58,10 @@ function DocumentViews({ document, isOpen }: Props) {
                 });
             return (
               <ListItem
-                key={item.id}
-                title={item.name}
+                key={model.id}
+                title={model.name}
                 subtitle={subtitle}
-                image={<Avatar key={item.id} src={item.avatarUrl} size={32} />}
+                image={<Avatar key={model.id} model={model} size={32} />}
                 border={false}
                 small
               />

app/components/EventListItem.tsx

@@ -142,7 +142,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
           onClick={handleTimeClick}
         />
       }
-      image={<Avatar src={event.actor?.avatarUrl} size={32} />}
+      image={<Avatar model={event.actor} size={32} />}
       subtitle={
         <Subtitle>
           {icon}

app/components/Facepile.tsx

@@ -39,7 +39,7 @@ function Facepile({
 }
 
 function DefaultAvatar(user: User) {
-  return <Avatar user={user} src={user.avatarUrl} size={32} />;
+  return <Avatar model={user} size={32} />;
 }
 
 const AvatarWrapper = styled.div`

app/components/Sidebar/App.tsx

@@ -63,14 +63,7 @@ function AppSidebar() {
               <SidebarButton
                 {...props}
                 title={team.name}
-                image={
-                  <StyledTeamLogo
-                    src={team.avatarUrl}
-                    width={32}
-                    height={32}
-                    alt={t("Logo")}
-                  />
-                }
+                image={<TeamLogo model={team} size={32} alt={t("Logo")} />}
                 showDisclosure
               />
             )}
@@ -139,11 +132,6 @@ function AppSidebar() {
   );
 }
 
-const StyledTeamLogo = styled(TeamLogo)`
-  margin-right: 4px;
-  background: white;
-`;
-
 const Drafts = styled(Text)`
   margin: 0 4px;
 `;

app/components/Sidebar/Sidebar.tsx

@@ -178,7 +178,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
                   image={
                     <StyledAvatar
                       alt={user.name}
-                      src={user.avatarUrl}
+                      model={user}
                       size={24}
                       showBorder={false}
                     />

app/components/TeamLogo.ts

@@ -1,10 +1,7 @@
 import styled from "styled-components";
+import Avatar from "./Avatar";
 
-const TeamLogo = styled.img<{ width?: number; height?: number; size?: string }>`
-  width: ${(props) =>
-    props.width ? `${props.width}px` : props.size || "auto"};
-  height: ${(props) =>
-    props.height ? `${props.height}px` : props.size || "38px"};
+const TeamLogo = styled(Avatar)`
   border-radius: 4px;
   border: 1px solid ${(props) => props.theme.divider};
   overflow: hidden;