feature/BA-2855-default-avatar-and-username-display (#304)

2 Fixes in 1 PR 

Default Avatar is Inconsistent:
https://silverlogic.atlassian.net/browse/BA-2855
Username in messages and group chat not matching design:
https://silverlogic.atlassian.net/browse/BA-2216

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Handles now consistently strip leading slashes and display with an @
prefix.

* **Style**
* Updated avatar visuals and switched group avatars to a
placeholder-aware avatar for more consistent appearance.

* **New Features**
* Added a shared handle-formatting utility and re-exported common
utilities for wider use.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: rf2tsl

packages/components/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @baseapp-frontend/components
 
+## 1.4.10
+
+### Patch Changes
+
+- Improved handle formatting with consistent @ display, updated avatar visuals, and added shared utilities for broader use
+- Updated dependencies
+  - @baseapp-frontend/design-system@1.1.6
+
 ## 1.4.9
 
 ### Patch Changes

packages/components/modules/__shared__/common/index.ts

@@ -2,3 +2,4 @@
 
 export * from './constants'
 export type * from './types'
+export * from './utils'

packages/components/modules/__shared__/common/utils.ts

@@ -0,0 +1,4 @@
+export function formatHandle(path?: string): string | null {
+  if (!path) return null
+  return `@${path.replace('/', '')}`
+}

packages/components/modules/activity-log/web/ActivityLogComponent/LogGroups/index.tsx

@@ -1,8 +1,9 @@
 import { FC } from 'react'
 
+import { AvatarWithPlaceholder } from '@baseapp-frontend/design-system/components/web/avatars'
 import { AvatarDeletedUserIcon } from '@baseapp-frontend/design-system/components/web/icons'
 
-import { Avatar, Box, CircularProgress, Typography } from '@mui/material'
+import { Box, CircularProgress, Typography } from '@mui/material'
 import { Virtuoso } from 'react-virtuoso'
 
 import { Timestamp } from '../../../../__shared__/web'
@@ -44,11 +45,12 @@ const LogGroups: FC<LogGroupsProps> = ({
   const renderAvatar = (group: LogGroup) => {
     if (group.logs[0]?.user == null) return <AvatarDeletedUserIcon />
     return (
-      <Avatar
-        style={{ marginBottom: '4px' }}
-        sizes="small"
+      <AvatarWithPlaceholder
+        width={40}
+        height={40}
+        className="self-start justify-self-center"
         src={group.logs[0]?.user?.avatar?.url ?? ''}
-        alt={group.logs[0]?.user?.fullName ?? 'User activity log avatar'}
+        sx={{ border: 'none', marginBottom: '4px' }}
       />
     )
   }

packages/components/modules/messages/web/GroupChatDetails/ProfileCard/index.tsx

@@ -12,6 +12,7 @@ import { Box, IconButton, Typography } from '@mui/material'
 import { useFragment } from 'react-relay'
 
 import { ProfileItemFragment$key } from '../../../../../__generated__/ProfileItemFragment.graphql'
+import { formatHandle } from '../../../../__shared__/common/utils'
 import { ProfileItemFragment } from '../../../../profiles/common'
 import { ADMIN_LABEL, CHAT_ROOM_PARTICIPANT_ROLES } from '../../../common'
 import AdminOptionsMenu from './AdminOptionsMenu'
@@ -88,7 +89,7 @@ const ProfileCard: FC<ProfileCardProps> = ({
           }}
         >
           <Typography variant="caption" color="text.secondary">
-            {showUrlPath && `@${urlPath.path}`}
+            {showUrlPath && formatHandle(urlPath.path)}
           </Typography>
           {showAdminLabel && showUrlPath && (
             <Box

packages/components/modules/messages/web/ProfileSummary/Body/index.tsx

@@ -13,6 +13,7 @@ import { Box, Divider, Typography } from '@mui/material'
 import { useFragment } from 'react-relay'
 
 import { ProfileSummaryFragment$key } from '../../../../../__generated__/ProfileSummaryFragment.graphql'
+import { formatHandle } from '../../../../__shared__/common/utils'
 import { ProfileSummaryFragment } from '../../../common/graphql/fragments/ProfileSummary'
 import {
   ButtonContainer,
@@ -48,7 +49,6 @@ const Body: FC<BodyProps> = ({ avatarSize = 144, chatRoomRef }) => {
   }
 
   const { name, avatar, username, biography, pk } = getroomNameAndAvatar() || {}
-  const formattedUsername = username ? username.replace(/^\/+/, '') : ''
   const profilePath = username ?? (pk ? `/profile/${pk}` : undefined)
 
   return (
@@ -59,9 +59,9 @@ const Body: FC<BodyProps> = ({ avatarSize = 144, chatRoomRef }) => {
           <TypographyWithEllipsis variant="subtitle1" color="text.primary">
             {name}
           </TypographyWithEllipsis>
-          {formattedUsername && (
+          {username && (
             <TypographyWithEllipsis variant="body2" color="text.secondary">
-              {`@${formattedUsername}`}
+              {formatHandle(username)}
             </TypographyWithEllipsis>
           )}
         </TitleContainer>

packages/components/modules/messages/web/SingleChatCreate/ChatRoomListItem/index.tsx

@@ -10,6 +10,7 @@ import { LoadingButton } from '@mui/lab'
 import { Box, Typography } from '@mui/material'
 import { ConnectionHandler, useFragment } from 'react-relay'
 
+import { formatHandle } from '../../../../__shared__/common/utils'
 import { ProfileItemFragment } from '../../../../profiles/common'
 import { useCreateChatRoomMutation } from '../../../common'
 import { MainContainer } from './styled'
@@ -32,7 +33,7 @@ const ChatRoomListItem: FC<ChatRoomListItemProps> = ({ profile: profileRef, onCh
       <Box sx={{ display: 'grid', gridTemplateRows: 'repeat(2, minmax(0, 1fr))' }}>
         <TypographyWithEllipsis variant="subtitle2">{name}</TypographyWithEllipsis>
         <Typography variant="caption" color="text.secondary">
-          {urlPath?.path && `@${urlPath.path?.replace('/', '')}`}
+          {urlPath?.path && formatHandle(urlPath.path)}
         </Typography>
       </Box>
       <LoadingButton

packages/components/modules/messages/web/__shared__/GroupChatMembersList/ProfileCard/index.tsx

@@ -8,6 +8,7 @@ import { Box, Button, Typography } from '@mui/material'
 import { useFragment } from 'react-relay'
 
 import { ProfileItemFragment$key } from '../../../../../../__generated__/ProfileItemFragment.graphql'
+import { formatHandle } from '../../../../../__shared__/common/utils'
 import { ProfileItemFragment } from '../../../../../profiles/common'
 import { MainContainer } from './styled'
 import { ProfileCardProps } from './types'
@@ -34,7 +35,7 @@ const ProfileCard: FC<ProfileCardProps> = ({
       <Box sx={{ display: 'grid', gridTemplateRows: 'repeat(2, minmax(0, 1fr))' }}>
         <Typography variant="subtitle2">{name}</Typography>
         <Typography variant="caption" color="text.secondary">
-          {urlPath?.path && `@${urlPath.path}`}
+          {urlPath?.path && formatHandle(urlPath.path)}
         </Typography>
       </Box>
       <Button

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "1.4.9",
+  "version": "1.4.10",
   "sideEffects": false,
   "scripts": {
     "build": "rm -rf dist && pnpm relay && tsc --build tsconfig.build.json",

packages/design-system/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @baseapp-frontend/design-system
 
+## 1.1.6
+
+### Patch Changes
+
+- Improved handle formatting with consistent @ display, updated avatar visuals, and added shared utilities for broader use
+
 ## 1.1.5
 
 ### Patch Changes