Small avatars for nested feed items

web/components/avatar.tsx

@@ -6,11 +6,11 @@ export function Avatar(props: {
   username?: string
   avatarUrl?: string
   noLink?: boolean
-  size?: number
+  size?: number | 'xs' | 'sm'
   className?: string
 }) {
   const { username, avatarUrl, noLink, size, className } = props
-  const s = size || 10
+  const s = size == 'xs' ? 6 : size === 'sm' ? 8 : size || 10
 
   const onClick =
     noLink && username

web/components/feed/activity-items.ts

@@ -37,6 +37,7 @@ export type BetItem = BaseActivityItem & {
   type: 'bet'
   bet: Bet
   hideOutcome: boolean
+  smallAvatar: boolean
 }
 
 export type CommentItem = BaseActivityItem & {
@@ -45,6 +46,7 @@ export type CommentItem = BaseActivityItem & {
   bet: Bet
   hideOutcome: boolean
   truncate: boolean
+  smallAvatar: boolean
 }
 
 export type CreateAnswerItem = BaseActivityItem & {
@@ -88,9 +90,10 @@ function groupBets(
   options: {
     hideOutcome: boolean
     abbreviated: boolean
+    smallAvatar: boolean
   }
 ) {
-  const { hideOutcome, abbreviated } = options
+  const { hideOutcome, abbreviated, smallAvatar } = options
 
   const commentsMap = mapCommentsByBetId(comments)
   const items: ActivityItem[] = []
@@ -123,6 +126,7 @@ function groupBets(
           contract,
           hideOutcome,
           truncate: abbreviated,
+          smallAvatar,
         }
       : {
           type: 'bet' as const,
@@ -130,6 +134,7 @@ function groupBets(
           bet,
           contract,
           hideOutcome,
+          smallAvatar,
         }
   }
 
@@ -213,7 +218,7 @@ function getAnswerGroups(
         DAY_IN_MS,
         contract,
         user?.id,
-        { hideOutcome: true, abbreviated }
+        { hideOutcome: true, abbreviated, smallAvatar: true }
       )
 
       if (abbreviated) items = items.slice(-2)
@@ -272,6 +277,7 @@ export function getAllContractActivityItems(
       : groupBets(bets, comments, DAY_IN_MS, contract, user?.id, {
           hideOutcome: !!filterToOutcome,
           abbreviated,
+          smallAvatar: !!filterToOutcome,
         }))
   )
 
@@ -310,6 +316,7 @@ export function getRecentContractActivityItems(
       : groupBets(bets, comments, DAY_IN_MS, contract, user?.id, {
           hideOutcome: false,
           abbreviated: true,
+          smallAvatar: false,
         })
 
   return [questionItem, ...items]

web/components/feed/feed-items.tsx

@@ -111,8 +111,9 @@ function FeedComment(props: {
   bet: Bet
   hideOutcome: boolean
   truncate: boolean
+  smallAvatar: boolean
 }) {
-  const { contract, comment, bet, hideOutcome, truncate } = props
+  const { contract, comment, bet, hideOutcome, truncate, smallAvatar } = props
   const { amount, outcome } = bet
   const { text, userUsername, userName, userAvatarUrl, createdTime } = comment
 
@@ -121,7 +122,12 @@ function FeedComment(props: {
 
   return (
     <>
-      <Avatar username={userUsername} avatarUrl={userAvatarUrl} />
+      <Avatar
+        className={clsx(smallAvatar && 'ml-1')}
+        size={smallAvatar ? 'sm' : undefined}
+        username={userUsername}
+        avatarUrl={userAvatarUrl}
+      />
       <div className="min-w-0 flex-1">
         <div>
           <p className="mt-0.5 text-sm text-gray-500">
@@ -165,8 +171,9 @@ function FeedBet(props: {
   contract: Contract
   bet: Bet
   hideOutcome: boolean
+  smallAvatar: boolean
 }) {
-  const { contract, bet, hideOutcome } = props
+  const { contract, bet, hideOutcome, smallAvatar } = props
   const { id, amount, outcome, createdTime, userId } = bet
   const user = useUser()
   const isSelf = user?.id === userId
@@ -194,9 +201,16 @@ function FeedBet(props: {
     <>
       <div>
         {isSelf ? (
-          <Avatar avatarUrl={user.avatarUrl} username={user.username} />
+          <Avatar
+            className={clsx(smallAvatar && 'ml-1')}
+            size={smallAvatar ? 'sm' : undefined}
+            avatarUrl={user.avatarUrl}
+            username={user.username}
+          />
         ) : isCreator ? (
           <Avatar
+            className={clsx(smallAvatar && 'ml-1')}
+            size={smallAvatar ? 'sm' : undefined}
             avatarUrl={contract.creatorAvatarUrl}
             username={contract.creatorUsername}
           />
@@ -504,11 +518,16 @@ function FeedDescription(props: { contract: Contract }) {
 }
 
 function FeedCreateAnswer(props: { contract: Contract; answer: Answer }) {
-  const { contract, answer } = props
+  const { answer } = props
 
   return (
     <>
-      <Avatar username={answer.username} avatarUrl={answer.avatarUrl} />
+      <Avatar
+        className="ml-1"
+        size="sm"
+        username={answer.username}
+        avatarUrl={answer.avatarUrl}
+      />
       <div className="min-w-0 flex-1 py-1.5">
         <div className="text-sm text-gray-500">
           <UserLink