Unread chats tab #136
Unread chats tab #136
Conversation
|
WalkthroughThe changes in this pull request introduce several new components, scripts, and modifications across various packages. Notably, a new script Changes
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
packages/components/modules/messages/ChatRoom/index.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /packages/components/.eslintrc.js
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Ronan-Fernandes
force-pushed
the
BA-1733-FE-Active-chats-tab
branch
8 times, most recently
from
0a3caea to
1e1f48b
Compare
Ronan-Fernandes
force-pushed
the
BA-1733-FE-Active-chats-tab
branch
from
1e1f48b to
b3d4ad7
Compare
Ronan-Fernandes
force-pushed
the
BA-1733-FE-Active-chats-tab
branch
from
b3d4ad7 to
945cdb3
Compare
Ronan-Fernandes
force-pushed
the
BA-1812-FE-packages-unread-messages
branch
from
9120264 to
98912a3
Compare
Ronan-Fernandes
force-pushed
the
BA-1733-FE-Active-chats-tab
branch
from
945cdb3 to
2f217a0
Compare
Ronan-Fernandes
force-pushed
the
BA-1812-FE-packages-unread-messages
branch
3 times, most recently
from
28cf91d to
eb2225f
Compare
Ronan-Fernandes
force-pushed
the
BA-1812-FE-packages-unread-messages
branch
from
eb2225f to
0b56a57
Compare
anicioalexandre
force-pushed
the
BA-1733-FE-Active-chats-tab
branch
4 times, most recently
from
6ebe5cf to
67ccab3
Compare
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 21
🧹 Outside diff range and nitpick comments (63)
.scripts/add-catalogs.js (3)
32-32: Remove unnecessary semicolon at the beginning of the lineThe semicolon at the beginning of this line is unnecessary and can be removed to adhere to standard coding conventions and improve readability.
Apply this diff to remove the semicolon:
-;['dependencies', 'devDependencies', 'peerDependencies', 'resolutions'].forEach( +['dependencies', 'devDependencies', 'peerDependencies', 'resolutions'].forEach(
32-57: Refactor nested loops to enhance readabilityThe nested loops and conditionals within the
replaceVersionsWithCatalogsfunction can be refactored to make the code more readable and maintainable. Simplifying the structure will make it easier for future developers to understand and modify the code.Consider extracting inner logic into separate helper functions or using early returns to reduce nesting depth.
36-39: Ensure the version variable is a string before using startsWithWhen checking if the version starts with
'catalog:', it's safer to ensure thatversionis a string to prevent potential runtime errors ifversionis undefined or not a string.Apply this diff to add a type check:
const version = packageJson[dependencyType][dependency] -if (!version.startsWith('catalog:')) { +if (typeof version === 'string' && !version.startsWith('catalog:')) {packages/components/modules/messages/ChatRoomsList/index.tsx (1)
126-126: Consider cross-browser support forscrollbarWidthCSS property.The
scrollbarWidthCSS property is not widely supported across all browsers. To ensure consistent styling, consider using alternative methods for hiding scrollbars, such as using CSS classes or alternative CSS techniques.packages/components/modules/profiles/graphql/queries/UserProfile.ts (1)
3-3: Please clarify the TODO comment.The comment "remove inline fragment" lacks context about why and when this should be removed. Consider adding more details about:
- The reason for using an inline fragment temporarily
- The conditions or timeline for its removal
- Any related tickets or issues
packages/components/modules/profiles/graphql/queries/ProfilesList.ts (1)
3-3: Enhance TODO comment with more contextThe TODO comment should include more context about why the inline fragment needs to be removed and any dependencies or conditions that need to be met before removal.
Consider expanding the comment to include:
- Reason for removal
- Dependencies or conditions
- Target timeline or related tickets
packages/components/modules/messages/ChatRoomsList/styled.tsx (1)
4-9: Consider enhancing type safety and reusability.The component could benefit from the following improvements:
- Add TypeScript interface for props
- Make the grid template rows configurable
- Add responsive breakpoints
Here's a suggested implementation:
import { Box } from '@mui/material' import { styled } from '@mui/material/styles' +import { Theme } from '@mui/material/styles' + +interface ChatRoomListContainerProps { + gridTemplateRows?: string; +} -export const ChatRoomListContainer = styled(Box)(() => ({ +export const ChatRoomListContainer = styled(Box, { + shouldForwardProp: (prop) => prop !== 'gridTemplateRows', +})<ChatRoomListContainerProps>(({ theme, gridTemplateRows }) => ({ display: 'grid', - gridTemplateRows: 'min-content min-content auto', + gridTemplateRows: gridTemplateRows || 'min-content min-content auto', height: '100%', width: '100%', + [theme.breakpoints.down('sm')]: { + gridTemplateRows: 'min-content auto', + }, }))packages/components/modules/navigations/ViewportHeightContainer/types.ts (1)
7-9: Consider adding JSDoc documentation.Adding JSDoc documentation would improve developer experience by providing inline documentation about the interface's purpose and the themeLayout prop's usage.
+/** + * Props for the ViewportHeightContainer component that manages viewport height-based layouts + */ export interface ViewportHeightContainerProps extends PropsWithChildren, BoxProps { + /** Theme layout configuration from the design system */ themeLayout: ThemeLayout }packages/components/modules/messages/CreateChatRoomList/ChatRoomListItem/types.ts (1)
5-8: Consider adding documentation and using an enum for view state.The interface could benefit from:
- JSDoc documentation explaining the purpose and usage of these props
- Using an enum instead of a boolean for view state if there might be more than two views in the future
Consider applying these improvements:
+/** + * Props for the ChatRoomListItem component + * @property profile - The profile data for the chat room + * @property setIsInExistingChatRoomsView - Function to toggle between chat room views + */ export interface ChatRoomListItemProps { profile: ProfileItemFragment$key setIsInExistingChatRoomsView: Dispatch<SetStateAction<boolean>> } +// If more views might be added in the future, consider using an enum: +export enum ChatRoomView { + NEW = 'NEW', + EXISTING = 'EXISTING' +}packages/components/modules/profiles/graphql/queries/ProfileItemInline.ts (1)
4-17: LGTM! Well-structured GraphQL fragmentThe fragment is well-designed with:
- Proper use of @inline directive for optimization
- Clear argument definition for avatar size
- Essential profile fields included
The @inline directive is a good choice here as it:
- Reduces the number of network requests
- Optimizes the GraphQL response size
- Improves query execution performance
packages/components/modules/messages/ChatRoomsList/ChatRoomItem/types.ts (1)
Line range hint
15-18: Consider renamingStyledChatCardPropstoStyledChatItemPropsFor consistency with the new naming convention, where "Card" has been replaced with "Item", this interface should also be updated.
-export interface StyledChatCardProps extends BoxProps { +export interface StyledChatItemProps extends BoxProps { isCardSelected?: boolean showPointer?: boolean }packages/components/modules/messages/ChatRoom/styled.tsx (1)
7-10: LGTM! Consider extracting border radius values to theme constants.The border radius implementation is correct and provides good granular control. However, for better maintainability, consider extracting these commonly used values to theme constants.
export const ChatRoomContainer = styled(Box)(({ theme }) => ({ backgroundColor: alpha(theme.palette.grey[500], 0.12), border: `1px solid ${theme.palette.grey[200]}`, - borderTopLeftRadius: 0, - borderTopRightRadius: theme.spacing(2), - borderBottomLeftRadius: 0, - borderBottomRightRadius: theme.spacing(2), + borderTopLeftRadius: theme.shape.borderRadius.none, + borderTopRightRadius: theme.shape.borderRadius.medium, + borderBottomLeftRadius: theme.shape.borderRadius.none, + borderBottomRightRadius: theme.shape.borderRadius.medium,packages/components/modules/messages/SearchNotFoundState/index.tsx (2)
1-3: Consider adding type definitions for imported components.For better type safety, consider importing and using types for the
SearchingImagecomponent from the design system.-import { SearchingImage } from '@baseapp-frontend/design-system' +import type { SearchingImageProps } from '@baseapp-frontend/design-system' +import { SearchingImage } from '@baseapp-frontend/design-system'
9-14: Consider enhancing component flexibility and internationalization.The component could be more reusable across different contexts:
- Consider making the messages configurable through props
- Add support for internationalization (i18n)
- Allow customization of the image through props
Example implementation:
interface SearchNotFoundStateProps { className?: string; title?: string; description?: string; image?: React.ComponentType<any>; } const SearchNotFoundState: React.FC<SearchNotFoundStateProps> = ({ className, title = 'No results found', description = 'Check your spelling or try another search.', image: Image = SearchingImage, }) => ( // ... rest of the implementation )packages/components/modules/messages/CreateChatRoomList/EmptyProfilesListState/index.tsx (1)
5-17: Add component documentation and props interfaceConsider adding TypeScript interface and JSDoc documentation to improve maintainability and reusability.
+interface EmptyProfilesListStateProps { + /** Optional className for custom styling */ + className?: string; +} + +/** + * Displays an empty state when no profiles are available in the chat room list + * @component + */ -const EmptyProfilesListState = () => ( +const EmptyProfilesListState: React.FC<EmptyProfilesListStateProps> = ({ className }) => ( - <Box display="grid" justifyItems="center" gridAutoRows="min-content" gap={1.5} padding={4}> + <Box + className={className} + display="grid" + justifyItems="center" + gridAutoRows="min-content" + gap={1.5} + padding={4} + >packages/components/modules/messages/context/ChatRoomProvider/index.tsx (2)
Line range hint
10-10: Consider providing a default store implementation.Initializing the context with
nullcould lead to runtime errors if the context is accessed outside of a provider. Consider creating a default store implementation:-export const ChatRoomContext = createContext<StoreApi<UseChatRoom> | null>(null) +const createStore = () => create<UseChatRoom>((set) => ({ + ...INITIAL_CHAT_ROOM_STATE, + setChatRoom: set, + resetChatRoom: () => set({ ...INITIAL_CHAT_ROOM_STATE }), +})) +export const ChatRoomContext = createContext<StoreApi<UseChatRoom>>(createStore())
Line range hint
12-21: Consider adding a custom hook for context consumption and error handling.While the provider implementation is solid, there are a few improvements that could make it more robust and easier to use:
- Add a custom hook for consuming the context:
export const useChatRoom = () => { const store = useContext(ChatRoomContext) if (!store) { throw new Error('useChatRoom must be used within ChatRoomProvider') } return useStore(store) }
- Consider adding error boundaries or error handling for store operations:
const ChatRoomProvider: FC<PropsWithChildren> = ({ children }) => { const storeRef = useRef<StoreApi<UseChatRoom>>() if (!storeRef.current) { - storeRef.current = create<UseChatRoom>((set) => ({ - ...INITIAL_CHAT_ROOM_STATE, - setChatRoom: set, - resetChatRoom: () => set({ ...INITIAL_CHAT_ROOM_STATE }), - })) + try { + storeRef.current = create<UseChatRoom>((set) => ({ + ...INITIAL_CHAT_ROOM_STATE, + setChatRoom: (state) => { + try { + set(state) + } catch (error) { + console.error('Failed to update chat room state:', error) + } + }, + resetChatRoom: () => { + try { + set({ ...INITIAL_CHAT_ROOM_STATE }) + } catch (error) { + console.error('Failed to reset chat room state:', error) + } + }, + })) + } catch (error) { + console.error('Failed to create chat room store:', error) + throw error + } } return <ChatRoomContext.Provider value={storeRef.current}>{children}</ChatRoomContext.Provider> }packages/components/modules/navigations/constants.ts (3)
1-4: Consider adding type annotations and extracting magic numbers.While the renaming improves clarity, consider these enhancements:
- Add TypeScript type annotations for better type safety
- Extract the offset value (16) as a named constant
+const HEADER_OFFSET_VALUE = 16 + +interface HeaderHeights { + MOBILE: number + DESKTOP: number + DESKTOP_OFFSET: number +} + -export const HEADER_HEIGHT = { +export const HEADER_HEIGHT: HeaderHeights = { MOBILE: 64, DESKTOP: 80, - DESKTOP_OFFSET: 80 - 16, + DESKTOP_OFFSET: 80 - HEADER_OFFSET_VALUE, }
7-10: Add type annotations for better type safety.Similar to the header heights, consider adding TypeScript types for the navigation widths.
+interface NavWidths { + VERTICAL: number + MINI: number +} + -export const NAV_WIDTH = { +export const NAV_WIDTH: NavWidths = { VERTICAL: 280, MINI: 88, }
12-39: Improve maintainability and type safety of padding constants.Consider these improvements:
- Extract shared interface for both padding constants
- Extract magic numbers as named constants
- Consider creating a factory function for consistent padding generation
+interface NavPadding { + top: number + bottom: number +} + +interface NavPaddingConfig { + horizontal: NavPadding + centered: NavPadding + vertical: NavPadding +} + +const PADDING = { + LARGE_TOP_OFFSET: 40, + STANDARD_OFFSET: 24, + SMALL_OFFSET: 8, + HORIZONTAL_BOTTOM: 15, + HORIZONTAL_BOTTOM_LG: 10, +} as const + -export const NAV_PADDING_UP_TO_LG = { +export const NAV_PADDING_UP_TO_LG: NavPaddingConfig = { horizontal: { - top: HEADER_HEIGHT.MOBILE * 2 + 40, - bottom: 15, + top: HEADER_HEIGHT.MOBILE * 2 + PADDING.LARGE_TOP_OFFSET, + bottom: PADDING.HORIZONTAL_BOTTOM, }, centered: { - top: HEADER_HEIGHT.MOBILE + 24, + top: HEADER_HEIGHT.MOBILE + PADDING.STANDARD_OFFSET, bottom: 0, }, vertical: { - top: HEADER_HEIGHT.DESKTOP + 8, - bottom: HEADER_HEIGHT.DESKTOP + 8, + top: HEADER_HEIGHT.DESKTOP + PADDING.SMALL_OFFSET, + bottom: HEADER_HEIGHT.DESKTOP + PADDING.SMALL_OFFSET, }, } -export const NAV_PADDING_DOWN_TO_LG = { +export const NAV_PADDING_DOWN_TO_LG: NavPaddingConfig = { horizontal: { - top: HEADER_HEIGHT.MOBILE + 24, - bottom: 10, + top: HEADER_HEIGHT.MOBILE + PADDING.STANDARD_OFFSET, + bottom: PADDING.HORIZONTAL_BOTTOM_LG, }, centered: { - top: HEADER_HEIGHT.MOBILE + 32, + top: HEADER_HEIGHT.MOBILE + PADDING.STANDARD_OFFSET + PADDING.SMALL_OFFSET, bottom: 0, }, vertical: { - top: HEADER_HEIGHT.MOBILE + 8, - bottom: HEADER_HEIGHT.MOBILE + 8, + top: HEADER_HEIGHT.MOBILE + PADDING.SMALL_OFFSET, + bottom: HEADER_HEIGHT.MOBILE + PADDING.SMALL_OFFSET, }, }packages/components/modules/navigations/ViewportHeightContainer/index.tsx (3)
6-7: Convert TODOs to tracked issues.These TODOs represent important architectural decisions that should be properly tracked.
Would you like me to create GitHub issues to track:
- Moving the component to the design system package
- Adding Storybook documentation and examples?
11-25: Consider refactoring for better maintainability and type safety.While the implementation is functional, it could be improved in several ways:
- The
themeLayoutprop appears to be a string union type ('horizontal' | 'centered' | 'vertical'), but it's not properly constrained- The implementation could be more maintainable using an object map
Consider this refactoring:
-const ViewportHeightContainer: FC<ViewportHeightContainerProps> = ({ +type ThemeLayout = 'horizontal' | 'centered' | 'vertical' + +const CONTAINER_MAP: Record<ThemeLayout, typeof VerticalContainer> = { + horizontal: HorizontalContainer, + centered: CenteredContainer, + vertical: VerticalContainer, +} + +const ViewportHeightContainer: FC<ViewportHeightContainerProps & { themeLayout: ThemeLayout }> = ({ children, themeLayout, ...props }) => { - if (themeLayout === 'horizontal') { - return <HorizontalContainer {...props}>{children}</HorizontalContainer> - } - - if (themeLayout === 'centered') { - return <CenteredContainer {...props}>{children}</CenteredContainer> - } - - return <VerticalContainer {...props}>{children}</VerticalContainer> + const Container = CONTAINER_MAP[themeLayout] ?? VerticalContainer + return <Container {...props}>{children}</Container> }This refactoring:
- Adds proper type constraints for
themeLayout- Makes it easier to add new layouts in the future
- Reduces conditional logic
- Maintains the same functionality
8-10: Add more comprehensive JSDoc documentation.While the current documentation explains the basic purpose, it would be helpful to include:
Consider expanding the documentation:
/** * This component is used to create a container that takes the full height of the viewport, considering the theme layout configuration. + * + * @param props.children - The content to be rendered inside the container + * @param props.themeLayout - The layout type ('horizontal' | 'centered' | 'vertical') + * @returns A container component with the specified layout and full viewport height + * + * @example + * ```tsx + * <ViewportHeightContainer themeLayout="horizontal"> + * <Content /> + * </ViewportHeightContainer> + * ``` */packages/components/modules/messages/MessagesList/MessagesGroup/MessageItem/index.tsx (1)
Line range hint
18-29: Consider enhancing accessibility for message contentWhile the component handles message display well, consider adding ARIA attributes to improve screen reader experience.
<MessageItemContainer isOwnMessage={isOwnMessage} isFirstGroupedMessage={isFirstGroupedMessage}> <Typography variant="body2" color={isOwnMessage ? 'text.primary' : 'primary.contrastText'} sx={{ maxWidth: '100%', wordWrap: 'break-word' }} + role="article" + aria-label={`Message ${isOwnMessage ? 'sent' : 'received'}`} > {message?.content} </Typography> </MessageItemContainer>packages/components/modules/messages/ChatRoomsList/types.ts (1)
13-15: LGTM! Consider adding JSDoc commentsThe type definitions are well-structured and provide proper type safety through the
NonNullableutility. They create a clear chain for accessing the GraphQL data structure.Consider adding JSDoc comments to explain the purpose of each type:
+/** Represents the chat rooms data from the GraphQL fragment */ type ChatRooms = NonNullable<RoomsListFragment$data['chatRooms']> +/** Represents the edges (connections) in the chat rooms graph */ type ChatRoomsEdges = ChatRooms['edges'] +/** Represents a single chat room node in the graph */ export type ChatRoomNode = NonNullable<ChatRoomsEdges[number]>['node']packages/components/modules/messages/CreateChatRoomList/types.ts (1)
11-13: Consider adding TSDoc comments for the new typesThe type definitions are well-structured and use appropriate TypeScript features for type safety. However, adding documentation would improve maintainability.
+/** Represents the non-null allProfiles data from the GraphQL fragment */ type AllProfiles = NonNullable<AllProfilesListFragment$data['allProfiles']> +/** Represents the edges array from the allProfiles connection */ type AllProfilesEdges = AllProfiles['edges'] +/** Represents a single profile node from the GraphQL data */ export type ProfileNode = NonNullable<AllProfilesEdges[number]>['node']packages/components/modules/navigations/shared/NavToggleButton/index.tsx (1)
27-27: Consider extracting the magic numberThe
-12offset could be moved to a constant or theme variable for better maintainability and reusability.+const TOGGLE_BUTTON_OFFSET = 12 + export default function NavToggleButton({ // ... sx={{ // ... - left: NAV_WIDTH.VERTICAL - 12, + left: NAV_WIDTH.VERTICAL - TOGGLE_BUTTON_OFFSET, // ... }}packages/components/modules/profiles/graphql/queries/AllProfilesList.ts (1)
Line range hint
7-28: LGTM! Good refactoring to improve code reuse.The refactoring to use
ProfileItemFragmentinstead of inline fields improves code maintainability and consistency. The fragment maintains proper pagination setup with appropriate directives and type definitions.Consider adding a comment above the fragment to document:
- The purpose of this fragment
- The fields included via ProfileItemFragment
- Usage examples
+/** + * Fragment for paginated profile list queries + * Includes standard profile fields via ProfileItemFragment + * Used in profile listing views with pagination support + */ export const fragmentQuery = graphql`packages/components/modules/messages/graphql/subscriptions/useMessageCountUpdateSubscription.tsx (1)
7-27: Consider implementing error boundaries for subscription errors.While the subscription logs errors to console, consider implementing error boundaries to gracefully handle and display subscription failures to users.
+import { ErrorBoundary } from 'react-error-boundary' + const useMessageCountUpdate = () => { const { profile } = useCurrentProfile() const config = useMemo( () => ({ subscription: MessageCountUpdateSubscription, - onError: console.error, + onError: (error) => { + console.error(error) + // Implement proper error handling/reporting + }, variables: { profileId: profile?.id, }, }), [profile?.id], ) return useSubscription(config) }package.json (1)
16-17: Consider moving dependency management changes to a separate PR.These infrastructure improvements, while valuable, seem unrelated to the main objective of adding an "Unread chats tab". Consider splitting these dependency management changes into a separate PR to maintain focused code reviews and clearer change history.
packages/components/modules/messages/graphql/mutations/ReadMessages.ts (1)
23-48: Consider these improvements for better type safety and performance.The hook implementation is good, but could be enhanced:
- Type safety: The error handling could be more specific about error types
- Memory optimization: The commit function could be memoized
Consider applying these improvements:
export const useReadMessageMutation = (): [ (config: UseMutationConfig<ReadMessagesMutation>) => Disposable, boolean, ] => { const { sendToast } = useNotification() const [commitMutation, isMutationInFlight] = useMutation<ReadMessagesMutation>(ReadMessagesMutationQuery) - const commit = (config: UseMutationConfig<ReadMessagesMutation>) => + const commit = useCallback((config: UseMutationConfig<ReadMessagesMutation>) => commitMutation({ ...config, onCompleted: (response, errors) => { - errors?.forEach((error) => { + errors?.forEach((error: { message: string }) => { sendToast(error.message, { type: 'error' }) }) config?.onCompleted?.(response, errors) }, onError: (error) => { sendToast(error.message, { type: 'error' }) config?.onError?.(error) }, }) - ) + ), [commitMutation, sendToast]) return [commit, isMutationInFlight] }Don't forget to add the import:
-import { Disposable, UseMutationConfig, graphql, useMutation } from 'react-relay' +import { Disposable, UseMutationConfig, graphql, useMutation } from 'react-relay' +import { useCallback } from 'react'packages/components/modules/navigations/NavMini/index.tsx (1)
Line range hint
49-57: Consider extracting common styles to a shared constantThe width property update is correct, but consider extracting the common navigation styles (width, border, scroll behavior) to a shared constant for better maintainability.
// In ../constants.ts export const MINI_NAV_STYLES = { pb: 2, height: 1, position: 'fixed', width: NAV_WIDTH.MINI, borderRight: (theme) => `solid 1px ${theme.palette.divider}`, ...hideScroll.x, } as const; // In this file <Stack sx={MINI_NAV_STYLES}>packages/components/modules/profiles/ProfilePopover/ProfilesList/ProfileMenuItem/index.tsx (1)
21-24: LGTM! Consider memoizing the profile data.The implementation correctly uses the new inline fragment with proper typing. Since this component might re-render frequently in a list, consider memoizing the profile data.
Consider applying this optimization:
- const profile = readInlineData<ProfileItemInlineFragment$key>( - ProfileItemInlineFragment, - profileRef, - ) + const profile = useMemo( + () => readInlineData<ProfileItemInlineFragment$key>( + ProfileItemInlineFragment, + profileRef, + ), + [profileRef] + )packages/components/modules/messages/graphql/subscriptions/useRoomListSubscription.tsx (1)
Line range hint
37-71: Consider implementing subscription error recoveryWhile the basic subscription implementation is good, consider enhancing the error handling beyond just console.error. Some suggestions:
- Implement retry logic for failed subscriptions
- Add error boundaries
- Consider offline scenarios
packages/components/modules/messages/CreateChatRoomList/ChatRoomListItem/index.tsx (2)
22-26: Consider adding error handling for the mutation and profile accessWhile the hooks are well-implemented, consider adding:
- Error handling for the mutation
- Fallback handling when currentProfile is undefined
const [commit, isMutationInFlight] = useCreateChatRoomMutation() +const [error, setError] = useState<Error | null>(null) const { profile: currentProfile } = useCurrentProfile() +if (!currentProfile?.id) { + console.warn('Current profile not available') + return null +}
Line range hint
46-57: Enhance type safety and performance of the click handlerConsider these improvements:
- Memoize the click handler to prevent unnecessary re-renders
- Add type safety for the mutation input
- Extract the success callback
+const handleSuccess = useCallback((data: CreateChatRoomMutationResponse) => { + const roomId = data?.chatRoomCreate?.room?.node?.id + if (roomId) { + setChatRoom({ id: roomId }) + setIsInExistingChatRoomsView(true) + } +}, [setChatRoom, setIsInExistingChatRoomsView]) +const handleClick = useCallback(() => { + if (!currentProfile?.id) return + + const input: CreateChatRoomInput = { + profileId: currentProfile.id, + participants: [id] + } + + commit({ + variables: { input }, + onCompleted: handleSuccess, + }) +}, [currentProfile?.id, id, commit, handleSuccess]) -onClick={() => { - if (currentProfile?.id) { - commit({ - variables: { - input: { profileId: currentProfile.id, participants: [id] }, - }, - onCompleted: (data) => { - setChatRoom({ id: data?.chatRoomCreate?.room?.node?.id }) - setIsInExistingChatRoomsView(true) - }, - }) - } -}} +onClick={handleClick}packages/components/modules/navigations/NavigationLayout/MainContainer/styled.tsx (1)
50-64: LGTM! Consider enhancing type safety for width calculationsThe changes improve maintainability by using well-named constants and maintaining consistent padding patterns. The width calculations for different nav states are clear and well-structured.
Consider adding type safety for the width calculations:
export const NavVerticalContainer = styled(CommonContainer)<NavVerticalContainerProps>( ({ theme, isNavMini = false }) => ({ // ... other styles ... [theme.breakpoints.up('lg')]: { // ... other styles ... width: isNavMini - ? `calc(100% - ${NAV_WIDTH.MINI}px)` - : `calc(100% - ${NAV_WIDTH.VERTICAL}px)`, + ? `calc(100% - ${NAV_WIDTH.MINI as number}px)` + : `calc(100% - ${NAV_WIDTH.VERTICAL as number}px)`, }, }), ).scripts/replace-catalogs.js (3)
6-8: LGTM! Consider adding workspace config existence check.The path handling is robust, using appropriate Node.js path utilities. However, it would be beneficial to add an early validation check for the workspace configuration file.
Consider adding this check after line 8:
if (!fs.existsSync(workspaceConfigPath)) { console.error(`Workspace configuration not found at: ${workspaceConfigPath}`); process.exit(1); }
53-53: Add validation for packages directory existence.The path handling is correct, but the script should validate that the packages directory exists before proceeding.
Add this validation after the packages path definition:
if (!fs.existsSync(packagesPath)) { console.error(`Packages directory not found at: ${packagesPath}`); process.exit(1); }
77-77: Enhance error handling for lock file regeneration.While the command execution is correct, the error handling could be more robust.
Consider this improved error handling:
try { execSync('pnpm install --lockfile-only', { stdio: 'inherit', cwd: rootDir }) console.log('pnpm-lock.yaml has been successfully regenerated.') } catch (error) { - console.error('An error occurred while regenerating pnpm-lock.yaml:', error) + console.error('Failed to regenerate pnpm-lock.yaml:'); + if (error.stderr) console.error(error.stderr.toString()); + process.exit(1); }packages/components/modules/messages/ChatRoomsList/ChatRoomItem/index.tsx (2)
Line range hint
16-21: Consider adding explicit type for BadgePropsWhile the component initialization looks good, consider adding an explicit type for
BadgePropsto improve type safety and documentation.+ import { BadgeProps as MuiBadgeProps } from '@mui/material' - BadgeProps = {}, + BadgeProps = {} as MuiBadgeProps,
Line range hint
74-94: Consider extracting dot separator stylesThe inline styles for the dot separator could be moved to a styled component or theme to improve maintainability.
// Create a new styled component const MessageDotSeparator = styled(Box)(({ theme }) => ({ display: 'inline-block', height: '6px', width: '6px', borderRadius: '50%', backgroundColor: theme.palette.text.disabled, marginX: theme.spacing(1), })); // Use it in the component <MessageDotSeparator />packages/components/modules/profiles/context/CurrentProfileProvider/index.tsx (1)
Line range hint
57-61: Consider enhancing error handling visibilityThe current error handling silently catches failures during profile fetching. Consider adding error logging or user notification for better debugging and user experience.
fetchUserProfile(environment) .then((userProfile) => { if (userProfile) { storeRef.current?.setState({ profile: userProfile, userId: user.id }) } }) - // If the user profile request fails, the current profile state will remain empty. - .catch(() => {}) + .catch((error) => { + console.error('Failed to fetch user profile:', error); + // Optionally: Notify user or tracking service + })packages/components/modules/messages/CreateChatRoomList/index.tsx (2)
Line range hint
23-41: TODO comment needs implementationThe component initialization looks good, but there's a TODO comment for group chat creation that needs to be addressed.
Would you like me to help implement the group chat creation click handler or create a GitHub issue to track this task?
42-54: Consider debouncing search updatesWhile the search implementation with
startTransitionis good, consider adding debouncing to prevent excessive API calls during rapid typing.+import { useCallback } from 'react' +import debounce from 'lodash/debounce' const handleSearchChange: ChangeEventHandler<HTMLInputElement> = (e) => { - const value = e.target.value || '' - startTransition(() => { - refetch({ q: value }) - }) + debouncedSearch(e.target.value || '') } +const debouncedSearch = useCallback( + debounce((value: string) => { + startTransition(() => { + refetch({ q: value }) + }) + }, 300), + [] +)packages/components/CHANGELOG.md (2)
10-10: Fix typo in component nameThere's a typo in the component name: "MainCointainer" should be "MainContainer"
-Add `ViewportHeightContainer` component and make sure `MainCointainer` uses variables from the navigation's constants. +Add `ViewportHeightContainer` component and make sure `MainContainer` uses variables from the navigation's constants.
7-8: Enhance change descriptions with more contextThe current descriptions are quite brief. Consider adding more context about:
- What the Active Tab functionality enables users to do
- What specific tweaks were made to the messages modules
- The impact of these changes on the user experience
Example of more detailed descriptions:
-Add Active Tab functionality to the `messages` module. -Several tweaks on the messages modules in general. +Add Active Tab functionality to the `messages` module, enabling users to track and switch between active conversations. +Several UI and performance improvements to the messages module, including improved loading states and error handling.packages/design-system/CHANGELOG.md (1)
7-7: Document the form integration changesThe change to use
withControllerinSearchBarsuggests form integration updates. Consider adding more details about:
- The purpose of this integration
- Any new props or behavior changes
- Migration steps if needed
packages/components/modules/messages/MessagesList/MessagesGroup/index.tsx (2)
55-85: Consider UX implications of error color for unread messagesThe implementation of the unread messages divider is technically sound, but using error.light for unread messages might not be the best UX choice as it could suggest something is wrong rather than just being unread.
Consider using a more neutral or informative color variant:
- borderTop: `1px solid ${theme.palette.error.light}`, + borderTop: `1px solid ${theme.palette.info.light}`,- <Typography variant="caption" color="error" sx={{ textAlign: 'center' }}> + <Typography variant="caption" color="info" sx={{ textAlign: 'center' }}>
136-137: Use theme spacing for consistencyWhile the layout changes are good, consider using theme spacing values for consistency across the application.
Consider these improvements:
- <Box display="flex" flexDirection="column" sx={{ paddingTop: 1 / 2, paddingRight: 2 }}> + <Box display="flex" flexDirection="column" sx={{ pt: 0.5, pr: 2 }}>README.md (1)
144-166: Fix list indentation for better readability.The content and instructions are clear and helpful. However, there are some formatting inconsistencies in the list indentation.
Apply these changes to fix the indentation:
- 5. **Restore Catalog Entries and Merge**: - - Once you've finished testing or using the non-published version, you can restore the catalog entries in one of two ways: - - - Option 1: Revert the Commit - - Revert the commit that removed the catalogs to restore them to their previous state: - - ```bash - git revert <commit-hash> - ``` - This will effectively undo the catalog removal and bring back the original entries. - - - Option 2: Run the `add-catalogs` script - - Run the `add-catalogs` script to reapply catalog entries without reverting the commit: - - ```bash - pnpm add-catalogs - ``` - This will update all package.json files to include catalog entries again. + 5. **Restore Catalog Entries and Merge**: + + Once you've finished testing or using the non-published version, you can restore the catalog entries in one of two ways: + + - Option 1: Revert the Commit + + Revert the commit that removed the catalogs to restore them to their previous state: + + ```bash + git revert <commit-hash> + ``` + This will effectively undo the catalog removal and bring back the original entries. + + - Option 2: Run the `add-catalogs` script + + Run the `add-catalogs` script to reapply catalog entries without reverting the commit: + + ```bash + pnpm add-catalogs + ``` + This will update all package.json files to include catalog entries again.🧰 Tools
🪛 Markdownlint (0.35.0)
148-148: Expected: 0; Actual: 2
Unordered list indentation(MD007, ul-indent)
157-157: Expected: 0; Actual: 2
Unordered list indentation(MD007, ul-indent)
packages/design-system/components/illustrations/AddProductsToCartImage/index.tsx (1)
1-50: Consider enhancing the component API.As this is part of a design system:
- Consider adding size variants (sm, md, lg) instead of hardcoding the size
- Add component documentation with usage examples
- Consider adding color variants that align with your design tokens
This will improve the component's flexibility and maintainability within the design system.
packages/design-system/components/illustrations/CodingImage/index.tsx (1)
7-47: Add accessibility attributes to the SVGConsider adding ARIA attributes and a title element to improve accessibility for screen readers.
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" + role="img" + aria-labelledby="codingImageTitle" > + <title id="codingImageTitle">Coding Illustration</title> <pathpackages/design-system/components/illustrations/ABTestingImage/index.tsx (1)
5-68: Consider memoizing the component for performance.Since this is a static SVG illustration, you could optimize rendering performance by memoizing the component:
-const ABTestingImage: FC<SvgIconProps> = ({ sx, ...props }) => ( +const ABTestingImage: FC<SvgIconProps> = memo(({ sx, ...props }) => ( <SvgIcon sx={{ fontSize: 200, color: 'primary.dark', ...sx }} {...props}> {/* SVG content */} </SvgIcon> -); +)); +// Add display name for better debugging +ABTestingImage.displayName = 'ABTestingImage';Don't forget to import
memofrom 'react'.packages/design-system/components/illustrations/ClickbaitImage/index.tsx (1)
1-118: Consider adding documentation and accessibility improvements.As this component is part of the design system, consider the following improvements:
- Add JSDoc documentation describing the component's purpose and usage
- Include aria-label or title for accessibility
- Add a storybook story to showcase the component
import { FC } from 'react' import { SvgIcon, SvgIconProps } from '@mui/material' +/** + * ClickbaitImage - An illustration component for clickbait-related content + * @component + * @example + * ```tsx + * <ClickbaitImage sx={{ fontSize: 100 }} /> + * ``` + */ const ClickbaitImage: FC<SvgIconProps> = ({ sx, ...props }) => ( <SvgIcon sx={{ fontSize: 200, color: 'primary.dark', ...sx }} {...props}> <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" + role="img" + aria-label="Clickbait illustration" >packages/design-system/components/illustrations/ComingSoonImage/index.tsx (1)
6-13: Consider making the icon size configurable.The hardcoded fontSize of 200 might limit the component's reusability. Consider making it configurable through props while keeping 200 as the default.
-const ComingSoonImage: FC<SvgIconProps> = ({ sx, ...props }) => ( +interface ComingSoonImageProps extends SvgIconProps { + size?: number; +} + +const ComingSoonImage: FC<ComingSoonImageProps> = ({ sx, size = 200, ...props }) => ( - <SvgIcon sx={{ fontSize: 200, color: 'primary.dark', ...sx }} {...props}> + <SvgIcon sx={{ fontSize: size, color: 'primary.dark', ...sx }} {...props}>packages/design-system/components/illustrations/BringSolutionsImage/index.tsx (1)
7-13: Add accessibility attributes to enhance SVG accessibility.Consider adding ARIA attributes to make the illustration more accessible.
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" + role="img" + aria-label="Bring Solutions Illustration" >packages/design-system/components/illustrations/BeingCreativeImage/index.tsx (1)
6-13: Consider making size and color configurable via props.The hardcoded size and color might limit the component's reusability. Consider making these configurable while keeping the current values as defaults.
-const BeingCreativeImage: FC<SvgIconProps> = ({ sx, ...props }) => ( +interface BeingCreativeImageProps extends SvgIconProps { + size?: number; + colorToken?: string; +} + +const BeingCreativeImage: FC<BeingCreativeImageProps> = ({ + sx, + size = 200, + colorToken = 'primary.dark', + ...props +}) => ( - <SvgIcon sx={{ fontSize: 200, color: 'primary.dark', ...sx }} {...props}> + <SvgIcon sx={{ fontSize: size, color: colorToken, ...sx }} {...props}> <svg - width="200" - height="200" + width={size} + height={size}packages/design-system/components/illustrations/BusinessDealImage/index.tsx (2)
6-13: Consider adding accessibility attributes to the SVG.While the SVG implementation is correct, consider adding ARIA attributes for better accessibility.
<SvgIcon sx={{ fontSize: 200, color: 'primary.dark', ...sx }} {...props}> <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" + role="img" + aria-label="Business Deal Illustration" >
14-57: Consider breaking down complex SVG paths into named components.While the SVG paths are correct, the complexity could be managed better by breaking them into smaller, named components for improved maintainability.
Consider creating a separate file for the paths and importing them, or using named constants:
// paths.ts export const BUSINESS_DEAL_PATHS = { mainPath: "M30.1 98.3002C29.6 98.5002...", decorativePath1: "M91.6 99.2002C91.9 98.5002...", // ... other paths } // BusinessDealImage/index.tsx import { BUSINESS_DEAL_PATHS } from './paths'packages/design-system/components/illustrations/ChartsImage/index.tsx (2)
7-13: Add accessibility attributes to the SVG.Consider adding the following accessibility attributes to improve screen reader support:
role="img"aria-labelwith a descriptive text<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" + role="img" + aria-label="Charts illustration" >
14-89: Consider grouping SVG paths semantically.The SVG paths could be organized better for maintainability:
- Group related paths using
<g>elements- Add descriptive comments for each group
- Consider adding
aria-labelledbywith descriptive titles+ <defs> + <title id="chartTitle">Charts illustration with data visualization elements</title> + </defs> + <g aria-labelledby="chartTitle"> + <!-- Chart elements --> <path d="M96.6999 73.6002C96.5999 73.6002..." fill="currentColor" /> <!-- More paths... --> + </g>packages/design-system/components/illustrations/AboutUsImage/index.tsx (1)
5-80: Consider memoizing the component for better performance.Since this is a static SVG, memoizing it can prevent unnecessary re-renders.
Apply this diff to memoize the component:
-const AboutUsImage: FC<SvgIconProps> = ({ sx, ...props }) => ( +const AboutUsImage: FC<SvgIconProps> = memo(({ sx, ...props }) => ( <SvgIcon sx={{ fontSize: 200, color: 'primary.dark', ...sx }} {...props}> {/* SVG content */} </SvgIcon> -); +)); + +AboutUsImage.displayName = 'AboutUsImage';Don't forget to add the import:
-import { FC } from 'react' +import { FC, memo } from 'react'
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (18)
packages/components/__generated__/AllProfilesListFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/AllProfilesListPaginationQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ChatRoomMessagesListPaginationQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ChatRoomQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ChatRoomsQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/MessageItemFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/MessagesListFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ProfileItemFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ProfileItemInlineFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ProfilesListQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ReadMessagesMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/RoomsListFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/SendMessageMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/UserProfileQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/chatRoomsPaginationQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/useMessageCountUpdateSubscription.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/useMessagesListSubscription.graphql.tsis excluded by!**/__generated__/**pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (82)
.scripts/add-catalogs.js(1 hunks).scripts/replace-catalogs.js(3 hunks)README.md(2 hunks)package.json(1 hunks)packages/authentication/CHANGELOG.md(1 hunks)packages/authentication/modules/user/useJWTUser/index.ts(0 hunks)packages/authentication/package.json(1 hunks)packages/components/CHANGELOG.md(1 hunks)packages/components/modules/messages/ChatRoom/index.tsx(1 hunks)packages/components/modules/messages/ChatRoom/styled.tsx(1 hunks)packages/components/modules/messages/ChatRoomsList/ChatRoomItem/index.tsx(3 hunks)packages/components/modules/messages/ChatRoomsList/ChatRoomItem/styled.tsx(1 hunks)packages/components/modules/messages/ChatRoomsList/ChatRoomItem/types.ts(1 hunks)packages/components/modules/messages/ChatRoomsList/EmptyChatRoomsState/index.tsx(1 hunks)packages/components/modules/messages/ChatRoomsList/index.tsx(3 hunks)packages/components/modules/messages/ChatRoomsList/styled.tsx(1 hunks)packages/components/modules/messages/ChatRoomsList/types.ts(1 hunks)packages/components/modules/messages/CreateChatRoomList/ChatRoomListCard/types.ts(0 hunks)packages/components/modules/messages/CreateChatRoomList/ChatRoomListItem/index.tsx(3 hunks)packages/components/modules/messages/CreateChatRoomList/ChatRoomListItem/styled.tsx(1 hunks)packages/components/modules/messages/CreateChatRoomList/ChatRoomListItem/types.ts(1 hunks)packages/components/modules/messages/CreateChatRoomList/EmptyProfilesListState/index.tsx(1 hunks)packages/components/modules/messages/CreateChatRoomList/index.tsx(4 hunks)packages/components/modules/messages/CreateChatRoomList/styled.tsx(0 hunks)packages/components/modules/messages/CreateChatRoomList/types.ts(1 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/MessageItem/index.tsx(1 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/MessageItem/types.ts(1 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/index.tsx(4 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/types.ts(1 hunks)packages/components/modules/messages/MessagesList/index.tsx(4 hunks)packages/components/modules/messages/MessagesList/types.ts(1 hunks)packages/components/modules/messages/SearchNotFoundState/index.tsx(1 hunks)packages/components/modules/messages/context/ChatRoomProvider/index.tsx(1 hunks)packages/components/modules/messages/graphql/mutations/ReadMessages.ts(1 hunks)packages/components/modules/messages/graphql/queries/ChatRoomQuery.ts(1 hunks)packages/components/modules/messages/graphql/queries/MessageItem.ts(1 hunks)packages/components/modules/messages/graphql/queries/MessagesList.ts(2 hunks)packages/components/modules/messages/graphql/queries/RoomsList.ts(1 hunks)packages/components/modules/messages/graphql/subscriptions/useMessageCountUpdateSubscription.tsx(1 hunks)packages/components/modules/messages/graphql/subscriptions/useRoomListSubscription.tsx(2 hunks)packages/components/modules/messages/index.ts(2 hunks)packages/components/modules/navigations/Header/AccountMenu/AccountPopover/LogoutItem/index.tsx(1 hunks)packages/components/modules/navigations/Header/styled.tsx(3 hunks)packages/components/modules/navigations/NavHorizontal/index.tsx(2 hunks)packages/components/modules/navigations/NavMini/index.tsx(4 hunks)packages/components/modules/navigations/NavVertical/index.tsx(3 hunks)packages/components/modules/navigations/NavigationLayout/MainContainer/styled.tsx(3 hunks)packages/components/modules/navigations/ViewportHeightContainer/index.tsx(1 hunks)packages/components/modules/navigations/ViewportHeightContainer/styled.tsx(1 hunks)packages/components/modules/navigations/ViewportHeightContainer/types.ts(1 hunks)packages/components/modules/navigations/constants.ts(1 hunks)packages/components/modules/navigations/index.ts(1 hunks)packages/components/modules/navigations/shared/NavToggleButton/index.tsx(2 hunks)packages/components/modules/navigations/shared/VerticalDrawer/index.tsx(2 hunks)packages/components/modules/profiles/ProfilePopover/ProfilesList/ProfileMenuItem/index.tsx(2 hunks)packages/components/modules/profiles/ProfilePopover/ProfilesList/ProfileMenuItem/types.ts(1 hunks)packages/components/modules/profiles/ProfilePopover/ProfilesList/index.tsx(2 hunks)packages/components/modules/profiles/context/CurrentProfileProvider/__tests__/CurrentProfileProvider.test.tsx(2 hunks)packages/components/modules/profiles/context/CurrentProfileProvider/index.tsx(2 hunks)packages/components/modules/profiles/context/CurrentProfileProvider/types.ts(1 hunks)packages/components/modules/profiles/graphql/queries/AllProfilesList.ts(1 hunks)packages/components/modules/profiles/graphql/queries/ProfileItem.ts(0 hunks)packages/components/modules/profiles/graphql/queries/ProfileItemInline.ts(1 hunks)packages/components/modules/profiles/graphql/queries/ProfilesList.ts(1 hunks)packages/components/modules/profiles/graphql/queries/UserProfile.ts(1 hunks)packages/components/package.json(1 hunks)packages/components/schema.graphql(3 hunks)packages/design-system/CHANGELOG.md(1 hunks)packages/design-system/components/Searchbar/types.ts(0 hunks)packages/design-system/components/icons/NoMessagesIcon/index.tsx(0 hunks)packages/design-system/components/icons/index.ts(0 hunks)packages/design-system/components/illustrations/ABTestingImage/index.tsx(1 hunks)packages/design-system/components/illustrations/AboutUsImage/index.tsx(1 hunks)packages/design-system/components/illustrations/AddProductsToCartImage/index.tsx(1 hunks)packages/design-system/components/illustrations/BeingCreativeImage/index.tsx(1 hunks)packages/design-system/components/illustrations/BringSolutionsImage/index.tsx(1 hunks)packages/design-system/components/illustrations/BusinessDealImage/index.tsx(1 hunks)packages/design-system/components/illustrations/ChartsImage/index.tsx(1 hunks)packages/design-system/components/illustrations/ClickbaitImage/index.tsx(1 hunks)packages/design-system/components/illustrations/CodingImage/index.tsx(1 hunks)packages/design-system/components/illustrations/ComingSoonImage/index.tsx(1 hunks)packages/design-system/components/illustrations/DesignThinkingImage/index.tsx(1 hunks)
⛔ Files not processed due to max files limit (21)
- packages/design-system/components/illustrations/DigitalAdsPerformanceImage/index.tsx
- packages/design-system/components/illustrations/DownloadingImage/index.tsx
- packages/design-system/components/illustrations/DrawingWIthTabletImage/index.tsx
- packages/design-system/components/illustrations/FixingBugsImage/index.tsx
- packages/design-system/components/illustrations/GetInspiredImage/index.tsx
- packages/design-system/components/illustrations/GiftingOnlineImage/index.tsx
- packages/design-system/components/illustrations/InterfaceTestingImage/index.tsx
- packages/design-system/components/illustrations/InvestingTestingImage/index.tsx
- packages/design-system/components/illustrations/ListeningFeedbackImage/index.tsx
- packages/design-system/components/illustrations/LoadingImage/index.tsx
- packages/design-system/components/illustrations/MarketingTargetImage/index.tsx
- packages/design-system/components/illustrations/ModularCodingApplicationImage/index.tsx
- packages/design-system/components/illustrations/NewsletterImage/index.tsx
- packages/design-system/components/illustrations/OfficeDeskImage/index.tsx
- packages/design-system/components/illustrations/OverworkedEmployee/index.tsx
- packages/design-system/components/illustrations/PageUnderConstructionImage/index.tsx
- packages/design-system/components/illustrations/PaymentWithCardImage/index.tsx
- packages/design-system/components/illustrations/ProtectPrivacyImage/index.tsx
- packages/design-system/components/illustrations/SearchingImage/index.tsx
- packages/design-system/components/illustrations/ShareImage/index.tsx
- packages/design-system/components/illustrations/SocialMediaDiscussionImage/index.tsx
💤 Files with no reviewable changes (7)
- packages/authentication/modules/user/useJWTUser/index.ts
- packages/components/modules/messages/CreateChatRoomList/ChatRoomListCard/types.ts
- packages/components/modules/messages/CreateChatRoomList/styled.tsx
- packages/components/modules/profiles/graphql/queries/ProfileItem.ts
- packages/design-system/components/Searchbar/types.ts
- packages/design-system/components/icons/NoMessagesIcon/index.tsx
- packages/design-system/components/icons/index.ts
✅ Files skipped from review due to trivial changes (11)
- packages/authentication/CHANGELOG.md
- packages/authentication/package.json
- packages/components/modules/messages/ChatRoomsList/ChatRoomItem/styled.tsx
- packages/components/modules/messages/ChatRoomsList/EmptyChatRoomsState/index.tsx
- packages/components/modules/messages/MessagesList/MessagesGroup/MessageItem/types.ts
- packages/components/modules/messages/MessagesList/MessagesGroup/types.ts
- packages/components/modules/messages/MessagesList/types.ts
- packages/components/modules/messages/graphql/queries/ChatRoomQuery.ts
- packages/components/modules/navigations/Header/AccountMenu/AccountPopover/LogoutItem/index.tsx
- packages/components/package.json
- packages/design-system/components/illustrations/DesignThinkingImage/index.tsx
🧰 Additional context used
🪛 Biome (1.9.4)
.scripts/replace-catalogs.js
[error] 33-33: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🪛 Markdownlint (0.35.0)
README.md
148-148: Expected: 0; Actual: 2
Unordered list indentation
(MD007, ul-indent)
157-157: Expected: 0; Actual: 2
Unordered list indentation
(MD007, ul-indent)
🔇 Additional comments (118)
packages/components/modules/profiles/graphql/queries/UserProfile.ts (1)
8-8: Verify the ProfileItemInlineFragment implementation.
The fragment change appears consistent with other updates mentioned in the summary. Let's verify the fragment's existence and implementation.
✅ Verification successful
The ProfileItemInlineFragment is properly implemented and consistently used
The fragment is well-defined in packages/components/modules/profiles/graphql/queries/ProfileItemInline.ts with all necessary fields (id, name, image, urlPath). It's correctly used across the codebase:
- Used in UserProfile and ProfilesList queries
- Properly imported and utilized in ProfileMenuItem component
- Correctly integrated with the CurrentProfileProvider context
- Generated types are consistent and properly referenced
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the existence and usage of ProfileItemInlineFragment
# Check for fragment definition
echo "Checking for fragment definition:"
rg -A 5 "fragment ProfileItemInlineFragment"
# Check for other usages to ensure consistency
echo "Checking for other usages:"
rg "...ProfileItemInlineFragment"
Length of output: 7622
packages/components/modules/profiles/graphql/queries/ProfilesList.ts (1)
4-11: Verify the ProfileItemInlineFragment implementation
The change from ProfileItemFragment to ProfileItemInlineFragment looks correct, but let's verify the fragment's implementation and usage.
✅ Verification successful
Based on the shell script results, I can now generate the final response:
Both fragments coexist but serve different purposes - this change is correct
The verification reveals that:
ProfileItemInlineFragmentis properly defined inProfileItemInline.tsand used consistently in profile-related componentsProfileItemFragmentstill exists and is used in different contexts (chat rooms, all profiles list)- Both fragments have identical structure (id, name, image, urlPath) but are used in different data fetching patterns (inline vs regular fragments)
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the existence and implementation of ProfileItemInlineFragment
# and ensure consistent usage across the codebase
# Check for the fragment definition
echo "Checking for fragment definition..."
ast-grep --pattern 'fragment ProfileItemInlineFragment on Profile {
$$$
}'
# Check for any remaining uses of the old fragment
echo "Checking for any remaining uses of old fragment..."
rg "ProfileItemFragment" --type ts
# Check for consistent usage of new fragment
echo "Checking for consistent usage of new fragment..."
rg "ProfileItemInlineFragment" --type ts
Length of output: 10809
packages/components/modules/messages/graphql/queries/MessageItem.ts (1)
12-12: LGTM! Addition of isRead field aligns with unread chats functionality.
The field addition is well-placed and follows GraphQL conventions.
Let's verify where this fragment is being used to ensure consistent handling of the new field:
✅ Verification successful
The isRead field addition is properly integrated across the codebase
The verification shows that:
- The field is correctly defined in the generated GraphQL fragment type
- It's properly included in the MessagesList query alongside the MessageItemFragment
- The type is properly defined as
boolean | null | undefined
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Find components using MessageItemFragment to verify proper handling of isRead field
# Expected: List of files importing and using this fragment
# Search for MessageItemFragment usage
rg -l "MessageItemFragment" packages/components/
Length of output: 1201
Script:
#!/bin/bash
# Let's check the actual usage of isRead field in components
# First, let's look at the MessageItem component implementation
rg "isRead" packages/components/modules/messages/MessagesList/MessagesGroup/MessageItem/ -A 3
# Then check the generated type definition
cat packages/components/__generated__/MessageItemFragment.graphql.ts
# Finally, let's verify if there are any direct usages of isRead in queries/mutations
rg "isRead" packages/components/modules/messages/graphql/ -A 3
Length of output: 3664
packages/components/modules/messages/ChatRoomsList/styled.tsx (1)
4-9: LGTM! Grid layout implementation is appropriate.
The grid layout with min-content rows for header elements and auto for the content area is a good choice for a chat room list container.
packages/components/modules/navigations/ViewportHeightContainer/types.ts (1)
7-9: LGTM! Clean and well-structured interface definition.
The interface properly extends React's PropsWithChildren and MUI's BoxProps while enforcing the use of the design system through the required themeLayout prop.
packages/components/modules/messages/CreateChatRoomList/ChatRoomListItem/types.ts (1)
1-8: LGTM! Clean and well-structured type definitions.
The interface is well-defined with proper typing for both the GraphQL fragment and state management function.
packages/components/modules/profiles/context/CurrentProfileProvider/types.ts (2)
1-1: Type changes look good, but verify impact.
The switch from ProfileItemFragment to ProfileItemInlineFragment is clean and maintains type safety. However, this is a breaking change that modifies the profile data structure.
Let's verify all consumers of this type:
Also applies to: 4-4
✅ Verification successful
Type change is safe to proceed
The verification shows that all consumers of the profile property are using it safely with optional chaining (?.), primarily accessing common fields like id, name, and image.url. The change from ProfileItemFragment to ProfileItemInlineFragment maintains these fields, making this a non-breaking change.
Key consumers found:
- Messages module (ChatRoomsList, MessagesList)
- Navigation components (AccountPopover)
- All access patterns use optional chaining, protecting against undefined values
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for components using CurrentProfileProvider or its types
rg -l "CurrentProfileProvider|UseCurrentProfile|CurrentProfileState" --type ts --type tsx
# Search for specific usage of profile property
rg "profile\?" --type ts --type tsx -C 3
Length of output: 190
Script:
#!/bin/bash
# Search for components using CurrentProfileProvider or its types without file type restrictions
rg -l "CurrentProfileProvider|UseCurrentProfile|CurrentProfileState"
# Search for specific usage of profile property with context
rg "profile\?" -C 3
Length of output: 11922
Line range hint 1-12: Ensure all context consumers are updated.
Since this is a context provider type change, we should verify that all components consuming this context have been updated to handle the new ProfileItemInlineFragment data structure.
Let's check for potential issues:
✅ Verification successful
Based on the comprehensive search results, I can now generate the final response:
The context type change has been properly implemented across all consumers.
The search results show that:
- The
ProfileItemInlineFragmentis consistently used throughout the codebase - All context consumers (
useCurrentProfilehook) are properly typed and handle the data structure correctly - Components using the context (AccountPopover, MessagesList, ProfilesList, etc.) are accessing the profile data in a type-safe manner
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Find any remaining references to the old fragment type
rg "ProfileItemFragment" --type ts --type tsx
# Look for potential type errors in consuming components
ast-grep --pattern 'useContext($PROVIDER)' --type ts,tsx
Length of output: 312
Script:
#!/bin/bash
# Find any remaining references to the old fragment type
rg "ProfileItemFragment"
# Look for context consumers
rg "useContext.*CurrentProfile" -A 2
# Find all files importing from CurrentProfileProvider
rg "from.*CurrentProfileProvider"
Length of output: 5915
Script:
#!/bin/bash
# Let's check the actual implementation of the context consumer to verify the type usage
rg -A 10 "useCurrentProfile"
# Let's also check where ProfileItemInlineFragment is actually used
rg "ProfileItemInlineFragment" -A 2
Length of output: 40000
packages/components/modules/profiles/graphql/queries/ProfileItemInline.ts (1)
3-3: Please clarify the TODO comment
The TODO comment suggests removing this fragment, but lacks context about why or when it should be removed. Since this fragment is being widely used across multiple components (ProfileMenuItem, ProfilesList, CurrentProfileProvider), removing it could have significant impact.
Let's check its usage across the codebase:
Consider updating the TODO comment to include:
- Reason for planned removal
- Conditions that need to be met before removal
- Alternative solution or replacement
packages/components/modules/messages/ChatRoomsList/ChatRoomItem/types.ts (2)
3-3: LGTM! Good use of type-only imports
The change to use type-only imports is a TypeScript best practice as it clearly indicates these imports are only used for type information.
Line range hint 7-13: LGTM! Interface rename aligns with component name
The renaming of ChatRoomCardProps to ChatRoomItemProps maintains consistency with the component rename mentioned in the summary.
packages/components/modules/messages/CreateChatRoomList/ChatRoomListItem/styled.tsx (1)
5-5: LGTM! The alignment change improves visual consistency.
The addition of alignItems: 'center' properly aligns the grid items vertically, which is especially important for a list item containing an avatar/icon, text, and action elements.
Let's verify the visual impact on existing layouts:
✅ Verification successful
The alignment change is safe and properly integrated
The alignItems: 'center' addition is verified to be correct and beneficial because:
- The component is only used within
CreateChatRoomListas a list item - The layout contains three aligned elements: an avatar (48px), text content, and a "Message" button
- The centering aligns with the parent's
GroupChatContainerwhich uses similar vertical alignment - No other components import or extend this styled component
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for other components that might be affected by this styling change
# Look for components using MainContainer from this styled module
rg -l "MainContainer.*from.*ChatRoomListItem/styled"
# Look for snapshot tests that might need updating
fd -e test.tsx -e test.ts -e spec.tsx -e spec.ts | xargs rg "ChatRoomListItem"
Length of output: 133
Script:
#!/bin/bash
# Let's try a broader search to find usage of this component and its styles
# Find imports of the ChatRoomListItem component
rg -l "ChatRoomListItem"
# Find any styled components with similar grid layout that might need alignment
ast-grep --pattern 'styled($_, $_)`
$$$
gridTemplateColumns: $$$
$$$
`'
# Look for test files specifically in the messages directory
fd "test|spec" packages/components/modules/messages
Length of output: 487
Script:
#!/bin/bash
# Let's check the actual usage context and parent component
# Check the parent component's implementation
cat packages/components/modules/messages/CreateChatRoomList/index.tsx
# Check the changelog for any related changes
cat packages/components/CHANGELOG.md | grep -A 5 "ChatRoomList"
# Check the component's own implementation
cat packages/components/modules/messages/CreateChatRoomList/ChatRoomListItem/index.tsx
Length of output: 6808
packages/components/modules/profiles/ProfilePopover/ProfilesList/ProfileMenuItem/types.ts (2)
11-13: LGTM! Type updates are consistent.
The interface properties have been correctly updated to use the new ProfileItemInlineFragment types consistently across all properties. The type safety is maintained while keeping the interface clean and well-structured.
3-3: LGTM! Verify new GraphQL fragment.
The type-only import syntax and fragment type updates look good. Let's verify the new fragment exists and is correctly generated.
Also applies to: 6-8
✅ Verification successful
The verification results show that:
- The
ProfileItemInlineFragmentis properly defined inmodules/profiles/graphql/queries/ProfileItemInline.ts - The fragment is used in multiple queries (
UserProfileQueryandProfilesListQuery) - The generated type file exists at
packages/components/__generated__/ProfileItemInlineFragment.graphql.ts
Let's verify the generated type file content to ensure it matches the interface usage:
Let's try one more verification with a different command to check the type usage:
GraphQL fragment changes verified and properly integrated
The verification confirms that:
- The
ProfileItemInlineFragmentis properly defined in the GraphQL queries - The generated type file exists with correct type definitions
- The fragment is consistently used across the profiles module components and contexts
- The type import changes align with the broader inline fragment refactoring
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the existence and usage of ProfileItemInlineFragment
# Expected: Find the fragment definition and its usage across the codebase
# Check for the fragment definition
echo "Checking for fragment definition..."
rg -A 5 "fragment ProfileItemInline"
# Check for generated types
echo "Checking generated types file exists..."
fd -g "*ProfileItemInlineFragment.graphql*"
Length of output: 2451
Script:
#!/bin/bash
# Check the generated type definition
echo "Checking generated type definition..."
cat packages/components/__generated__/ProfileItemInlineFragment.graphql.ts
# Check where this type is being used
echo -e "\nChecking type usage..."
rg "ProfileItemInlineFragment" --type typescript
Length of output: 1310
Script:
#!/bin/bash
# Check type usage with ripgrep without file type restriction
echo "Checking type usage in TypeScript files..."
rg "ProfileItemInlineFragment" "*.ts" "*.tsx"
# Alternative search using find and grep
echo -e "\nAlternative search for type usage..."
find . -type f \( -name "*.ts" -o -name "*.tsx" \) -exec grep -l "ProfileItemInlineFragment" {} \;
Length of output: 1376
packages/components/modules/messages/ChatRoom/styled.tsx (1)
17-19: LGTM! Verify integration with adjacent components.
The responsive breakpoint change from 'lg' to 'md' and the removal of border radius on smaller screens looks good. However, we should verify how this integrates with adjacent components in the chat interface.
✅ Verification successful
Breakpoint change is consistent with module's responsive design patterns
The verification shows that:
- The
mdbreakpoint is used consistently in the ChatRoom component - Other components in the messages module primarily use
smbreakpoints for their responsive designs - The border radius adjustment at
mdbreakpoint is isolated to the ChatRoom container and doesn't conflict with other styled components
Since the ChatRoom is a container-level component and its styling changes are self-contained, the integration with adjacent components is maintained without issues.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for other components that might need similar responsive adjustments
# Look for other styled components in the messages module that might need coordinated changes
rg -t tsx "styled\((Box|Paper|Container)" packages/components/modules/messages
# Check for other uses of breakpoint 'md' in the messages module to ensure consistency
rg -t tsx "breakpoints\.down\('md'\)" packages/components/modules/messages
Length of output: 219
Script:
#!/bin/bash
# Description: Check for other components that might need similar responsive adjustments
# Look for other styled components in the messages module that might need coordinated changes
rg "styled\((Box|Paper|Container)" packages/components/modules/messages/
# Check for other uses of breakpoint 'md' in the messages module to ensure consistency
rg "breakpoints\.down\('md'\)" packages/components/modules/messages/
# Check for other breakpoint usages in the messages module
rg "breakpoints\.down\(" packages/components/modules/messages/
# Look for any styled components near ChatRoom
rg "styled\(" packages/components/modules/messages/ChatRoom/
Length of output: 2215
packages/components/modules/messages/SearchNotFoundState/index.tsx (1)
19-19: LGTM!
The export statement follows React conventions.
packages/components/modules/messages/CreateChatRoomList/EmptyProfilesListState/index.tsx (1)
1-19: LGTM! Clean and well-structured implementation
The component follows React and Material-UI best practices:
- Good component organization
- Proper use of MUI components and styling system
- Clear visual hierarchy with appropriate typography variants
- Consistent spacing and layout
packages/components/modules/messages/context/ChatRoomProvider/index.tsx (2)
1-5: LGTM! Proper setup with client-side directive and well-organized imports.
The 'use client' directive and imports are correctly structured, with proper type imports for React components.
Line range hint 1-21: Verify integration with ChatRoomsList component.
Since this provider is part of a larger chat system update, we should verify its integration with other components.
✅ Verification successful
Let me try with corrected file type flags for rg and a more comprehensive search strategy.
Let me check the actual implementation of ChatRoomsList and its relationship with the context to complete the verification.
Based on the results, I can now provide the final response:
✅ ChatRoomProvider is properly integrated with the chat system
The verification shows proper integration:
- ChatRoomsList correctly imports and uses the
useChatRoomhook - The context is properly consumed with
selectedRoomandsetChatRoomstate - A HOC
withChatRoomProvideris available for wrapping components - No circular dependencies were found between ChatRoomsList and ChatRoomProvider
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the usage of ChatRoomProvider and its integration
# Check for ChatRoomProvider usage
echo "Checking ChatRoomProvider usage:"
rg -l "ChatRoomProvider|useChatRoom" --type typescript --type tsx
# Check for potential circular dependencies
echo "\nChecking for potential circular dependencies:"
rg -l "ChatRoomsList.*ChatRoomProvider|ChatRoomProvider.*ChatRoomsList" --type typescript --type tsx
# Verify proper context consumption
echo "\nVerifying context consumption pattern:"
ast-grep --pattern 'useContext($_{ChatRoomContext})'
Length of output: 566
Script:
#!/bin/bash
# Search for ChatRoomProvider and useChatRoom usage
echo "Checking ChatRoomProvider and hook usage:"
rg -l "ChatRoomProvider|useChatRoom"
# Look for files containing both ChatRoomsList and ChatRoomProvider
echo -e "\nChecking component relationships:"
rg -l "ChatRoomsList.*ChatRoomProvider|ChatRoomProvider.*ChatRoomsList"
# Find context consumption patterns
echo -e "\nSearching for context consumption:"
rg "useContext.*ChatRoomContext" -A 2
# Look for ChatRoomsList component implementation
echo -e "\nSearching for ChatRoomsList implementation:"
fd "ChatRoomsList" --type f
# Check imports of ChatRoomProvider
echo -e "\nChecking imports of ChatRoomProvider:"
rg "import.*ChatRoomProvider"
Length of output: 1663
Script:
#!/bin/bash
# Check ChatRoomsList implementation
echo "ChatRoomsList implementation:"
rg -A 10 "const ChatRoomsList" packages/components/modules/messages/ChatRoomsList/index.tsx
# Check how ChatRoomsList uses the context
echo -e "\nContext usage in ChatRoomsList:"
rg "useChatRoom|ChatRoomContext" packages/components/modules/messages/ChatRoomsList/index.tsx
# Check withChatRoomProvider implementation
echo -e "\nwithChatRoomProvider implementation:"
cat packages/components/modules/messages/context/withChatRoomProvider/index.tsx
# Check if there are any other components using the context
echo -e "\nOther components using ChatRoom context:"
rg "useChatRoom" --type-not ts
Length of output: 1370
packages/components/modules/messages/graphql/queries/MessagesList.ts (2)
11-11: LGTM! Verify schema compatibility for unreadMessagesCount.
The addition of unreadMessagesCount at the room level is well-placed for tracking total unread messages in a chat room.
Let's verify the schema compatibility:
✅ Verification successful
LGTM! The unreadMessagesCount field is properly defined and used consistently.
The field is well-integrated across the codebase:
- Defined in schema as
unreadMessagesCount: Intfield onChatRoomtype - Used consistently in GraphQL fragments (MessagesListFragment, RoomFragment)
- Properly consumed in UI components for displaying unread counts
- Supported in mutations (ReadMessagesMutation) and subscriptions (useMessageCountUpdateSubscription)
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify that unreadMessagesCount field exists in ChatRoom type
# and is used consistently across the codebase
# Check for field usage in other fragments/queries
rg -t graphql "unreadMessagesCount"
# Check for corresponding UI components that might use this field
rg -t typescript -t javascript "unreadMessagesCount"
Length of output: 155
Script:
#!/bin/bash
# Let's try without file type filters since they're not recognized
# Search for GraphQL fragments/queries using unreadMessagesCount
rg "unreadMessagesCount"
# Also check for schema definitions
rg "type ChatRoom" -A 10
Length of output: 32499
25-25: LGTM! Verify schema compatibility for isRead.
The addition of isRead at the message level enables granular tracking of message read status.
Let's verify the schema compatibility and usage:
✅ Verification successful
Based on the schema inspection, I can now provide the final verification response:
Schema compatibility for isRead field is verified and properly implemented
The isRead field is correctly defined in the Message type with proper typing:
- It's an optional Boolean field that takes a profileId parameter
- It's supported by corresponding mutation
chatRoomReadMessagesfor updating read status - The schema includes proper payload types for handling read status updates
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify that isRead field exists in message type
# and is used consistently across the codebase
# Check for field usage in other fragments/queries
rg -t graphql "isRead"
# Check for corresponding UI components that might handle message read status
rg -t typescript -t javascript "isRead.*message"
Length of output: 140
Script:
#!/bin/bash
# Let's try different search approaches without file type restrictions
# Search for GraphQL schema definitions and usages
rg "type.*Message.*\{" -A 10
rg "fragment.*Message.*\{" -A 10
rg "query.*Message.*\{" -A 10
# Search for isRead field usage
rg "isRead"
# Search for message-related files
fd -e graphql
fd "message" -t f
Length of output: 76511
Script:
#!/bin/bash
# Let's check the schema definition for Message type and isRead field
cat packages/components/schema.graphql | grep -A 20 "type Message"
# Let's also check for any mutations or queries related to message read status
cat packages/components/schema.graphql | grep -A 10 "ChatRoomReadMessages"
Length of output: 2283
packages/components/modules/navigations/constants.ts (1)
1-39: Verify constant usage in dependent components.
Since these constants have been renamed and restructured, we should verify that all components using these constants have been updated accordingly.
✅ Verification successful
Let me verify the actual usage of these constants to ensure they are being used correctly in the components.
Constants are properly integrated across all dependent components
The verification shows that:
- No old constant references (
HEADER.H_*orNAV.W_*) exist in the codebase - All new constants are correctly used in their respective components:
HEADER_HEIGHTconstants are properly used in Header styling and navigation padding calculationsNAV_WIDTHconstants are correctly applied in layout calculations and component dimensionsNAV_PADDINGconstants are appropriately used in ViewportHeightContainer and MainContainer for responsive layouts
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for old constant names to ensure complete migration
echo "Checking for any remaining old constant references..."
rg -l "HEADER\.(H_MOBILE|H_DESKTOP|H_DESKTOP_OFFSET)" || echo "No old HEADER references found"
rg -l "NAV\.(W_VERTICAL|W_MINI)" || echo "No old NAV references found"
# Find all files using the new constants to verify correct usage
echo -e "\nFiles using new constants:"
rg -l "HEADER_HEIGHT|NAV_WIDTH|NAV_PADDING_UP_TO_LG|NAV_PADDING_DOWN_TO_LG"
Length of output: 1087
Script:
#!/bin/bash
# Check usage of HEADER_HEIGHT constants
echo "Usage of HEADER_HEIGHT constants:"
rg "HEADER_HEIGHT\." -A 2
echo -e "\nUsage of NAV_WIDTH constants:"
rg "NAV_WIDTH\." -A 2
echo -e "\nUsage of NAV_PADDING constants:"
rg "NAV_PADDING_(UP_TO|DOWN_TO)_LG" -A 2
Length of output: 12909
packages/components/modules/navigations/ViewportHeightContainer/index.tsx (2)
1-4: LGTM! Clean and focused imports.
The imports are well-organized and properly typed with explicit imports from local files.
1-27: Verify design system integration readiness.
Before moving this component to the design system package, we should verify its current usage and dependencies.
packages/components/modules/messages/MessagesList/MessagesGroup/MessageItem/index.tsx (1)
6-7: Verify the updated import paths
The import paths have been updated to use deeper traversal. Let's verify these changes are consistent across the codebase.
packages/components/modules/navigations/index.ts (2)
25-26: LGTM! Clean export of ViewportHeightContainer
The exports follow the established pattern in the file, maintaining consistency with other navigation components.
28-28: Verify the impact of constants renaming
The constants module has undergone significant changes, including renaming of HEADER to HEADER_HEIGHT and NAV to NAV_WIDTH. Let's verify that all usages have been updated.
✅ Verification successful
Constants renaming has been properly implemented
Based on the search results, all occurrences of the constants have been properly updated to use the new names HEADER_HEIGHT and NAV_WIDTH. There are no remaining instances of the old HEADER or NAV constants being used independently. All imports and usages across the navigation components are consistent with the renamed constants.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Search for any remaining usages of old constant names
# that might have been missed during the rename
# Check for old constant names in navigation components
echo "Checking for old HEADER constant usage..."
rg -l '\bHEADER\b(?!_HEIGHT)' packages/components/modules/navigations
echo "Checking for old NAV constant usage..."
rg -l '\bNAV\b(?!_WIDTH)' packages/components/modules/navigations
# Check for imports of the constants to verify all consuming components
echo "Checking constant imports..."
rg -A 2 "from ['|\"].*navigations/constants"
Length of output: 898
Script:
#!/bin/bash
# Let's try a different approach using simpler regex patterns
# Search for HEADER usage
echo "Checking HEADER usage..."
rg "HEADER" packages/components/modules/navigations
# Search for NAV usage
echo "Checking NAV usage..."
rg "NAV" packages/components/modules/navigations
# Check for imports of constants
echo "Checking constant imports..."
rg "from.*navigations/constants"
# Let's also check the constants file itself to see the current state
echo "Current constants file content..."
cat packages/components/modules/navigations/constants.ts
Length of output: 8113
packages/components/modules/messages/ChatRoomsList/types.ts (2)
9-10: LGTM! Import changes align with component refactoring
The imports correctly reflect the shift from ChatRoomCard to ChatRoomItem and ensure proper type safety with GraphQL fragments.
21-23: Verify the impact of interface changes
The interface updates look good and align with the component refactoring. The addition of EmptyChatRoomsState improves the component's flexibility in handling empty states.
Let's verify that all implementations have been updated to match the new interface:
✅ Verification successful
Let me check the actual implementations to ensure the interface changes are properly handled.
Interface changes have been properly implemented
The implementation shows that:
- All references to ChatRoomCard have been removed
- ChatRoomItem is properly implemented and used as a default component
- EmptyChatRoomsState is correctly implemented and integrated
- The component properly handles all the new interface props with appropriate defaults
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for any remaining references to ChatRoomCard and verify ChatRoomItem implementations
# Check for any remaining ChatRoomCard references
echo "Checking for remaining ChatRoomCard references..."
rg -l "ChatRoomCard" packages/components/modules/messages/
# Check for ChatRoomItem implementations
echo "Checking ChatRoomItem implementations..."
rg -l "ChatRoomItem" packages/components/modules/messages/
# Check for EmptyChatRoomsState implementations
echo "Checking EmptyChatRoomsState implementations..."
rg -l "EmptyChatRoomsState" packages/components/modules/messages/
Length of output: 958
Script:
#!/bin/bash
# Check the implementation details of ChatRoomsList and its usage of new props
echo "Checking ChatRoomsList implementation..."
cat packages/components/modules/messages/ChatRoomsList/index.tsx
echo -e "\nChecking EmptyChatRoomsState implementation..."
cat packages/components/modules/messages/ChatRoomsList/EmptyChatRoomsState/index.tsx
echo -e "\nChecking ChatRoomItem implementation..."
cat packages/components/modules/messages/ChatRoomsList/ChatRoomItem/index.tsx
Length of output: 9759
packages/components/modules/messages/CreateChatRoomList/types.ts (2)
7-9: LGTM! Import changes are well-structured
The imports are properly organized, with clear separation between generated GraphQL types and local component types.
19-20: Verify the Card to Item refactoring impact
The prop changes from Card to Item look correct. Let's ensure all consuming components have been updated accordingly.
✅ Verification successful
Card to Item refactoring has been properly implemented
The verification shows that:
- No references to
ChatRoomListCardexist in the codebase ChatRoomListItemis properly implemented with consistent usage:- Defined in
CreateChatRoomList/ChatRoomListItem/ - Used as a default component in
CreateChatRoomList/index.tsx - Types are properly defined and imported
- The change is documented in the CHANGELOG.md
- Defined in
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for any remaining references to ChatRoomListCard
rg -l "ChatRoomListCard" --type ts --type tsx
# Search for places where ChatRoomListItem is used to verify proper implementation
rg -A 5 "ChatRoomListItem" --type ts --type tsx
Length of output: 149
Script:
#!/bin/bash
# Search for any remaining references to ChatRoomListCard without file type restrictions
rg -l "ChatRoomListCard"
# Search for places where ChatRoomListItem is used
rg -A 5 "ChatRoomListItem"
# Use ast-grep to find any component definitions or imports related to these components
ast-grep --pattern 'import { $$ ChatRoomListCard $$ } from'
ast-grep --pattern 'import { $$ ChatRoomListItem $$ } from'
Length of output: 5658
packages/components/modules/navigations/shared/NavToggleButton/index.tsx (1)
6-6: LGTM! Improved constant naming
The rename from NAV to NAV_WIDTH makes the constant's purpose clearer and aligns with the broader changes across the codebase.
packages/components/modules/messages/index.ts (3)
Line range hint 1-29: Well-organized exports with clear separation of concerns!
The file maintains a clean structure with logical grouping of exports:
- Components and their types
- Context
- GraphQL operations (mutations, queries, subscriptions)
20-20: Verify the implementation of ReadMessages mutation
The addition of ReadMessages mutation suggests new functionality for marking messages as read. This is a crucial feature for chat applications.
✅ Verification successful
ReadMessages mutation implementation is properly structured and used
The mutation is well-implemented with:
- A GraphQL mutation definition for marking messages as read
- Proper error handling with toast notifications
- Integration with the chat room's unread message count
- Usage in the MessagesList component
- Complete type definitions and generated code
The implementation includes all necessary components:
- Input validation through
ChatRoomReadMessagesInputtype - Room fragment updates for UI consistency
- Error handling for field-level and general errors
- Proper connection with the chat room's message list
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the ReadMessages mutation implementation and its usage
# Check the mutation implementation
echo "Checking ReadMessages mutation implementation:"
ast-grep --pattern 'mutation ReadMessages {
$$$
}'
# Check for components using the mutation
echo "Checking components using ReadMessages mutation:"
rg -l "useReadMessagesMutation|ReadMessages" --type ts --type tsx
Length of output: 360
Script:
#!/bin/bash
# Let's try a different approach to verify the ReadMessages mutation
# Check the actual file content
echo "Checking the ReadMessages mutation file:"
fd "ReadMessages" --type f --exec cat {}
# Look for GraphQL mutation definitions
echo -e "\nLooking for ReadMessages mutation definition:"
rg "mutation.*ReadMessages" -A 5
# Check for any usage patterns
echo -e "\nChecking for usage patterns:"
rg "ReadMessages|markMessagesAsRead" --type ts
Length of output: 25805
29-29: Verify the message count subscription implementation
The new useMessageCountUpdateSubscription suggests real-time updates for unread message counts, which is essential for the unread chats tab feature.
packages/components/modules/messages/graphql/subscriptions/useMessageCountUpdateSubscription.tsx (3)
1-5: LGTM! Import statements are well-organized.
The imports are properly structured, following the convention of separating React core, third-party libraries, and local imports with blank lines.
46-46: LGTM! Export statement is correct.
The default export follows React hooks naming conventions.
7-27: Verify the RoomFragment import and implementation.
The subscription references ...RoomFragment but the import is not visible in the current context.
✅ Verification successful
Let's try a broader search since the previous attempt had issues with file types and didn't yield results. This script will:
- Look for the fragment definition in graphql files specifically
- Search for any mention of RoomFragment across all files
- List all graphql files to understand the structure better
RoomFragment is properly defined and imported
The fragment is well-defined in packages/components/modules/messages/graphql/queries/Room.ts and is being used correctly in the subscription. The fragment implementation includes all necessary fields for a chat room (id, unreadMessagesCount, image, lastMessageTime, lastMessage, title, participants, etc.).
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for RoomFragment definition and imports
echo "Searching for RoomFragment definition:"
ast-grep --pattern 'fragment RoomFragment on ChatRoom {
$$$
}'
echo -e "\nSearching for RoomFragment imports:"
rg "import.*RoomFragment" --type ts --type tsx
Length of output: 317
Script:
#!/bin/bash
# Search for RoomFragment definition with different approaches
echo "Searching for RoomFragment definition in graphql files:"
rg "fragment RoomFragment" --type graphql -A 10
echo -e "\nSearching for RoomFragment in all files:"
rg "RoomFragment" -A 2
echo -e "\nListing all graphql files:"
fd "\.(graphql|gql)$"
Length of output: 14280
packages/components/modules/messages/graphql/queries/RoomsList.ts (3)
12-12: LGTM! Well-structured argument definition.
The new unreadMessages argument is correctly defined with appropriate type and default value, maintaining backward compatibility.
17-18: Consider pagination behavior with unread messages filter.
When unreadMessages is true, ensure that the pagination behavior remains consistent and doesn't cause UI jumps when loading more rooms. Consider adding a test case for this scenario.
✅ Verification successful
Pagination implementation is properly handled for unread messages filter
The codebase shows that:
- The pagination is implemented using Relay's
@connectiondirective with a stable key "roomsList_chatRooms" - The component uses
usePaginationFragmenthook which handles cursor-based pagination correctly - The subscription system properly updates the connection when room data changes
The existing implementation will maintain pagination consistency even with the unread messages filter, as it:
- Uses Relay's built-in connection handling
- Maintains proper cursor-based pagination through the fragment
- Updates the connection through subscriptions while preserving pagination state
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Look for existing pagination tests
# that might need to be updated for the unread messages feature
# Search for test files related to room listing
fd -e test.ts -e test.tsx -e spec.ts -e spec.tsx | while read -r file; do
echo "Checking $file for room listing tests..."
rg -A 5 "describe.*room.*list|test.*pagination.*room|it.*pagination.*room" "$file"
done
Length of output: 17036
Script:
#!/bin/bash
# Let's try a different approach to find pagination and room list related tests
# by searching in the messages module specifically
# Search for test files in the messages module
echo "Searching for test files in messages module..."
fd -e test.ts -e test.tsx -e spec.ts -e spec.tsx . packages/components/modules/messages/
# Search for pagination and room list related code in messages module
echo -e "\nSearching for pagination and room list related code..."
rg -l "roomsList|chatRooms.*pagination|@connection.*roomsList" packages/components/modules/messages/
# Look for the implementation of the RoomsList component
echo -e "\nLooking for RoomsList component implementation..."
ast-grep --pattern 'const RoomsList = $_'
Length of output: 733
Script:
#!/bin/bash
# Let's examine the implementation details of the pagination and subscription
# Check the RoomsList query implementation
echo "Examining RoomsList query implementation..."
rg -A 10 "chatRooms.*first.*cursor" packages/components/modules/messages/graphql/queries/RoomsList.ts
# Check the subscription implementation for pagination handling
echo -e "\nExamining subscription implementation..."
rg -A 10 "useRoomListSubscription" packages/components/modules/messages/graphql/subscriptions/useRoomListSubscription.tsx
# Look for any existing pagination handling in the messages module
echo -e "\nLooking for pagination handling code..."
rg -A 5 "@connection|usePagination" packages/components/modules/messages/
Length of output: 5152
16-18: Verify schema compatibility for the unreadMessages parameter.
The query structure looks good, with the unreadMessagesCount field appropriately positioned and the unreadMessages parameter correctly added to the chatRooms query. However, let's verify that the GraphQL schema supports this new parameter.
✅ Verification successful
Schema compatibility verified for unreadMessages parameter
The GraphQL schema fully supports the unreadMessages parameter in the chatRooms field. The ChatRoomsInterface interface explicitly defines this Boolean parameter along with other pagination and filtering arguments. The query structure in RoomsList.ts correctly implements this parameter according to the schema definition.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check if the schema supports the unreadMessages parameter
# Look for schema definition files that might contain the chatRooms field definition
# Search for GraphQL schema files
fd -e graphql -e gql | while read -r file; do
echo "Checking $file for chatRooms field definition..."
rg -A 5 "type.*ChatRoomsInterface|field.*chatRooms" "$file"
done
# Search for potential TypeScript schema definitions
fd -e ts -e tsx | while read -r file; do
echo "Checking $file for ChatRoomsInterface..."
rg -A 5 "interface.*ChatRoomsInterface|type.*ChatRoomsInterface" "$file"
done
Length of output: 189289
Script:
#!/bin/bash
# Let's search for the schema definition of chatRooms field and its arguments
rg -A 10 "type.*Query|field.*chatRooms" packages/components/schema.graphql
# Also search for any interface definitions related to ChatRooms
rg -A 10 "interface.*ChatRooms|type.*ChatRooms" packages/components/schema.graphql
Length of output: 881
Script:
#!/bin/bash
# Let's search for the complete definition of ChatRoomsInterface to see all available arguments for chatRooms field
rg -B 5 -A 15 "interface ChatRoomsInterface" packages/components/schema.graphql
# Also search for any fragments or queries using the unreadMessages parameter
rg -A 5 "chatRooms.*unreadMessages" packages/components/modules/messages/graphql/
Length of output: 1134
packages/components/modules/navigations/shared/VerticalDrawer/index.tsx (3)
Line range hint 14-53: LGTM! Clean and well-structured component
The component follows React best practices:
- Proper type definitions with FC and Props
- Efficient usage of hooks (useEffect, usePathname)
- Clean composition with sub-components
- Proper handling of navigation state
11-11: Verify the NAV_WIDTH constant's exports
The import statement has been updated to use the renamed constant. Let's verify its existence and exports.
✅ Verification successful
Import statement correctly references the existing NAV_WIDTH constant
The verification confirms that:
- The
NAV_WIDTHconstant is properly defined and exported inpackages/components/modules/navigations/constants.ts - The constant includes the required
VERTICALproperty - No remaining usages of the old
NAV.W_VERTICALsyntax were found
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the NAV_WIDTH constant exists and is exported correctly
# Expected: Find the constant definition and its exports
# Search for the constant definition
ast-grep --pattern 'export const NAV_WIDTH = $_'
# Search for any potential usages of the old constant name
rg -l 'NAV\.W_VERTICAL'
Length of output: 355
30-30: LGTM! Verify drawer width behavior
The constant usage has been updated consistently with the import change. The new property name VERTICAL is more concise than the previous W_VERTICAL.
✅ Verification successful
LGTM! The drawer width constant is used consistently
The constant NAV_WIDTH.VERTICAL is used consistently across all navigation components:
- NavVertical: Used for setting the main navigation width
- Header: Used in width calculation for responsive layout
- MainContainer: Used in width calculations for layout spacing
- VerticalDrawer: Used for drawer width as expected
- NavToggleButton: Used for positioning the toggle button
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify consistent usage of NAV_WIDTH.VERTICAL across navigation components
# Expected: No remaining instances of the old constant usage
# Search for any remaining instances of the old width constant
rg -l 'W_VERTICAL'
# Find all usages of the new constant to ensure consistency
rg -l 'NAV_WIDTH\.VERTICAL'
Length of output: 395
Script:
#!/bin/bash
# Let's check the actual usage context in these files to ensure consistency
rg 'NAV_WIDTH\.VERTICAL' -C 2
Length of output: 3006
packages/components/modules/navigations/Header/styled.tsx (2)
6-6: LGTM! More semantic constant naming
The renamed imports (HEADER_HEIGHT, NAV_WIDTH) better reflect their purpose and improve code readability.
16-16: LGTM! Consistent constant usage with preserved responsive behavior
The constant usage has been consistently updated throughout the component while maintaining the same responsive layout logic. The calculations for different navigation layouts (vertical, horizontal, centered, mini) remain intact.
Let's verify that these constants are consistently used across other navigation components:
Also applies to: 27-28, 33-33, 37-37
✅ Verification successful
Constants are consistently used across navigation components
The verification shows that the HEADER_HEIGHT and NAV_WIDTH constants are consistently used throughout the navigation components, with no instances of old constant patterns (HEADER.[H] or NAV.[W]). The constants are properly imported and applied in:
- Header component for responsive heights
- Navigation layouts (Vertical, Horizontal, Mini) for proper widths
- Main container calculations
- Toggle button positioning
- Drawer dimensions
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for consistent usage of new constant names across navigation components
# Expect: Only new constant names (HEADER_HEIGHT, NAV_WIDTH) should be found
# Search for any remaining old constant usage
rg -l "HEADER\.[H]|NAV\.[W]" "packages/components/modules/navigations"
# Verify the new constant usage in other navigation components
rg "(HEADER_HEIGHT|NAV_WIDTH)" "packages/components/modules/navigations" -A 2
Length of output: 8448
packages/components/modules/navigations/NavHorizontal/index.tsx (2)
11-11: LGTM! Improved naming convention
The rename from HEADER to HEADER_HEIGHT makes the constant's purpose more explicit and self-documenting.
29-29: Verify the constant renaming across the codebase
The constant usage has been updated correctly here, but let's verify this renaming was consistently applied across all files.
✅ Verification successful
Constant renaming has been applied consistently
The verification shows that:
- No instances of the old constant
HEADER.H_DESKTOP_OFFSETwere found - The new constant
HEADER_HEIGHT.DESKTOP_OFFSETis used consistently in both relevant files:- packages/components/modules/navigations/NavHorizontal/index.tsx
- packages/components/modules/navigations/Header/styled.tsx
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for any remaining usages of old constant name
# to ensure consistent renaming across the codebase
# Search for any remaining HEADER.H_DESKTOP_OFFSET usage
echo "Checking for old constant usage..."
rg "HEADER\.H_DESKTOP_OFFSET"
# Search for new constant usage to verify correct implementation
echo "Verifying new constant usage..."
rg "HEADER_HEIGHT\.DESKTOP_OFFSET"
Length of output: 431
package.json (1)
16-17: LGTM! Script organization looks good.
The changes improve the project structure by:
- Moving scripts to a dedicated
.scriptsdirectory - Adding new functionality for catalog management
Let's verify the existence and basic structure of the referenced scripts:
✅ Verification successful
Scripts exist and contain expected functionality
The verification confirms:
- Both scripts exist in
.scripts/directory with proper implementations add-catalogs.jscontains the core functionality:- Loading workspace catalogs from config
- Mapping dependencies to catalog references
- Updating package dependencies
- Regenerating lock file
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the existence and basic structure of the catalog scripts
# Check if the scripts exist
echo "Checking script files..."
ls -l .scripts/add-catalogs.js .scripts/replace-catalogs.js
# Verify the basic structure of add-catalogs.js
echo -e "\nChecking add-catalogs.js implementation..."
rg -A 5 "loadWorkspaceCatalogs|getCatalogNameForDependency|replaceVersionsWithCatalogs|updatePackagesDependencies" .scripts/add-catalogs.js
# Verify the catalog-related configuration
echo -e "\nChecking for catalog configuration..."
fd -e yaml -e json "catalog" --exec head -n 20 {}
Length of output: 2316
packages/components/modules/messages/ChatRoom/index.tsx (2)
Line range hint 24-33: Consider implementing query preloading for better performance.
The current implementation uses lazy loading which can impact initial render performance. While the TODO comment suggests preloading, here are specific recommendations:
- Use Relay's
usePreloadedQuerywithloadQueryto start data fetching before component mount. - Consider implementing Suspense boundaries at a higher level to handle loading states more gracefully.
- Verify if 'store-and-network' fetch policy is necessary, as it might cause duplicate network requests.
Let's verify the query usage pattern across the codebase:
Line range hint 34-37: Enhance error handling with proper error states and user feedback.
The current error handling is basic and could be improved in several ways:
- Implement proper error states (network error, not found, permission denied).
- Use a dedicated error component with proper styling and user guidance.
- Consider implementing an error boundary for graceful failure handling.
- Add localization support for error messages.
Here's a suggested implementation:
- // TODO: handle error for chatRoom
- if (!chatRoom) {
- return <div>Chat room not found</div>
- }
+ if (!chatRoom) {
+ return (
+ <ErrorState
+ variant="not-found"
+ message={t('messages.chatRoom.notFound')}
+ action={
+ <Button onClick={() => navigate('/messages')}>
+ {t('common.backToMessages')}
+ </Button>
+ }
+ />
+ );
+ }Let's check for consistent error handling patterns:
packages/components/modules/messages/graphql/mutations/ReadMessages.ts (4)
1-5: LGTM! Imports are well-organized and necessary.
The imports are logically grouped and include all required dependencies for the mutation and hook implementation.
7-21: LGTM! Well-structured GraphQL mutation definition.
The mutation is well-defined with proper error handling and includes essential fields for managing unread messages.
1-48: Verify integration with the messaging system.
This mutation is a critical part of the messaging system. Let's verify its integration points.
✅ Verification successful
Integration with messaging system is properly implemented
The mutation is well integrated within the messaging system:
- Used in
MessagesList/index.tsxto mark messages as read - Properly updates the
unreadMessagesCountfield which is used across multiple components:ChatRoomItemcomponent uses it to display unread message badgesRoomFragmentincludes it for consistent state updates- Multiple subscriptions (
useMessageCountUpdateSubscription,useRoomListSubscription) handle real-time updates
- Error handling with toast notifications is implemented correctly
- The mutation updates the GraphQL cache through the
RoomFragmentspread, ensuring UI consistency
The implementation follows the established patterns and maintains data consistency across the messaging system.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify integration with messaging components
# Check for usage of the mutation in components
rg -A 5 "useReadMessageMutation" --type tsx
# Check for related unread message count usage
ast-grep --pattern 'unreadMessagesCount'
Length of output: 112
Script:
#!/bin/bash
# Let's try different approaches to verify the integration
# Check for usage of the mutation in all file types
rg -A 5 "useReadMessageMutation"
# Check for RoomFragment references since it's used in the mutation
rg "RoomFragment"
# Check for chatRoomReadMessages usage
rg "chatRoomReadMessages"
# Look for files containing unreadMessagesCount
rg "unreadMessagesCount"
Length of output: 27790
13-13: Verify the RoomFragment implementation and import.
The mutation uses a RoomFragment but its import is not visible in the current file.
✅ Verification successful
RoomFragment is properly defined and used in the codebase
The RoomFragment is correctly defined in packages/components/modules/messages/graphql/queries/Room.ts and is being used appropriately in the mutation. The fragment is part of the GraphQL schema and follows the expected pattern for Relay fragments.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify RoomFragment existence and implementation
# Search for RoomFragment definition
ast-grep --pattern 'fragment RoomFragment on Room {
$$$
}'
# Search for RoomFragment imports
rg -l "import.*RoomFragment" --type ts
Length of output: 250
Script:
#!/bin/bash
# Let's check the content of the file under review to see imports and fragment usage
cat packages/components/modules/messages/graphql/mutations/ReadMessages.ts
# Let's also check if RoomFragment is defined in any graphql files
fd -e graphql -e gql | xargs rg "fragment RoomFragment"
# Let's check the content of files that import RoomFragment
cat packages/components/modules/messages/ChatRoomsList/ChatRoomItem/types.ts
cat packages/components/modules/messages/ChatRoomsList/ChatRoomItem/index.tsx
Length of output: 5481
Script:
#!/bin/bash
# Let's check the Room.ts file where RoomFragment is imported
cat packages/components/modules/messages/graphql/queries/Room.ts
# Also check if RoomFragment is defined in any .ts files
rg "fragment RoomFragment" --type ts
Length of output: 7987
packages/components/modules/navigations/ViewportHeightContainer/styled.tsx (1)
1-4: Verify the imported navigation constants
The code imports padding constants from a relative path. Let's ensure these constants are properly defined and exported.
✅ Verification successful
Navigation constants are properly defined and exported
The constants NAV_PADDING_DOWN_TO_LG and NAV_PADDING_UP_TO_LG are correctly defined and exported in packages/components/modules/navigations/constants.ts. Both constants are properly structured objects containing padding values for different layout types (horizontal, centered, vertical) and are calculated based on the HEADER_HEIGHT constant.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the navigation constants exist and are properly exported
# Expected: Find the constants file and verify the exported values
# Search for the constants file
echo "Searching for constants file..."
fd constants.ts$ --exec cat {} packages/components/modules/navigations/
# Verify the constant exports
echo "Verifying constant exports..."
ast-grep --pattern 'export const NAV_PADDING_DOWN_TO_LG = $_'
ast-grep --pattern 'export const NAV_PADDING_UP_TO_LG = $_'
Length of output: 11325
packages/components/modules/navigations/NavMini/index.tsx (3)
10-10: LGTM! Semantic improvement in constant naming
The rename from NAV to NAV_WIDTH better reflects the constant's purpose, making the code more self-documenting.
44-47: LGTM! Correct toggle button positioning
The left position calculation maintains the proper 12px offset from the mini navigation width.
35-37: Verify consistent usage of NAV_WIDTH.MINI across navigation components
The width property update is correct and maintains the responsive behavior.
✅ Verification successful
NAV_WIDTH.MINI constant is consistently used across navigation components
The verification confirms that:
- No legacy
NAV.W_MINIreferences remain in the navigation components NAV_WIDTH.MINIis consistently used across the codebase in:- NavigationLayout/MainContainer/styled.tsx (container width calculation)
- NavMini/index.tsx (component width and positioning)
- Header/styled.tsx (width calculation)
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for consistent usage of NAV_WIDTH.MINI across navigation components
# and ensure no legacy NAV.W_MINI references remain
# Search for any remaining legacy NAV.W_MINI references
rg "NAV\.W_MINI" packages/components/modules/navigations
# Verify consistent usage of NAV_WIDTH.MINI
rg "NAV_WIDTH\.MINI" packages/components/modules/navigations
Length of output: 646
packages/components/modules/navigations/NavVertical/index.tsx (2)
10-10: LGTM! Import statement updated correctly.
The import statement has been properly updated to use the renamed constant NAV_WIDTH.
35-35: LGTM! Constant usage updated consistently.
The width properties have been correctly updated to use NAV_WIDTH.VERTICAL in both the outer Box and inner Stack components, maintaining consistent navigation width values.
Let's verify that all occurrences of the old constant have been updated:
Also applies to: 44-44
✅ Verification successful
All usages of NAV_WIDTH.VERTICAL are consistent across the codebase
The verification shows that:
- No instances of the old constant
NAV.W_VERTICALwere found NAV_WIDTH.VERTICALis consistently used across all relevant navigation components:- Header's styled component
- VerticalDrawer component
- NavToggleButton component
- NavVertical component (both instances)
- NavigationLayout's MainContainer
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for any remaining usages of the old NAV constant
# and verify consistent usage of NAV_WIDTH
# Search for any remaining NAV.W_VERTICAL usage
echo "Checking for old constant usage..."
rg "NAV\.W_VERTICAL"
# Search for NAV_WIDTH.VERTICAL usage to ensure consistency
echo "Checking new constant usage..."
rg "NAV_WIDTH\.VERTICAL"
Length of output: 873
packages/components/modules/messages/graphql/subscriptions/useRoomListSubscription.tsx (2)
6-7: LGTM: Import added correctly
The useCurrentProfile hook import is properly added and utilized in the component.
37-37: Address the TODO comment about BE subscription
There's an unresolved TODO comment about checking if the BE subscription is working properly. This should be verified before merging.
Let's check for any related backend subscription issues:
Would you like me to help create a test plan or open an issue to track the backend subscription verification?
packages/components/modules/messages/CreateChatRoomList/ChatRoomListItem/index.tsx (3)
9-16: LGTM! Well-organized imports
The imports are logically grouped and all are being utilized in the component.
18-21: LGTM! Clear component declaration with well-defined props
The component name change from ChatRoomListCard to ChatRoomListItem better reflects its purpose, and the props are well-structured.
68-68: LGTM! Clean export
The default export follows React component conventions.
packages/components/modules/navigations/NavigationLayout/MainContainer/styled.tsx (3)
4-4: LGTM! Improved constant naming and organization
The new imports provide better semantic meaning and organization of navigation-related constants.
21-28: Verify the impact of zero padding on mobile layouts
The addition of paddingBottom: 0 for small screens might affect the mobile layout spacing. Please ensure this change is intentional and doesn't create any visual inconsistencies.
Consider documenting the reasoning behind removing bottom padding on mobile views in a code comment, as this might not be immediately obvious to other developers.
33-41: LGTM! Consistent padding pattern across components
The padding adjustments maintain consistency with NavHorizontalContainer, including the mobile view adjustments.
packages/components/modules/profiles/ProfilePopover/ProfilesList/index.tsx (3)
Line range hint 25-31: LGTM: Profile change handler implementation
The type update for the handleProfileChange parameter is consistent with the import change. The function's logic remains sound:
- Prevents unnecessary profile switches when selecting the current profile
- Updates the current profile context
- Provides user feedback via toast notification
- Closes the submenu after switching
Line range hint 42-71: Well-structured component with good practices
The ProfilesListSuspended component demonstrates several good practices:
- Uses Suspense for loading states
- Includes proper accessibility attributes (
aria-label) - Has clean separation of presentation and logic
- Implements smooth transitions with Material-UI's Slide component
11-11: Verify GraphQL schema changes across related components
The change from ProfileItemFragment$data to ProfileItemInlineFragment$data suggests a schema update. Let's verify this change is consistent across all components using this type.
✅ Verification successful
Let me analyze the results and generate additional verification scripts to get a complete picture.
The previous results show both fragments coexisting in the codebase, but we need to verify their actual usage in components to understand if this is an intentional pattern or if we need to ensure consistency.
Let's check the actual files and implementations to understand the fragment usage pattern. The previous search had issues with the typescript file type flag, so we'll try without it.
Based on the results, I can now provide a final response:
GraphQL fragment changes are part of an intentional pattern
The codebase shows a clear separation where ProfileItemInlineFragment is used in profile management components (ProfilePopover, CurrentProfileProvider) while ProfileItemFragment is used in listing and chat room contexts. This is a valid coexistence pattern rather than an inconsistency that needs to be fixed.
ProfileItemInlineFragmentis correctly used inProfilesList/index.tsxas it's part of the profile management module- The fragment definitions exist in their respective query files:
packages/components/modules/profiles/graphql/queries/ProfileItemInline.tspackages/components/modules/profiles/graphql/queries/ProfileItem.ts
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for any remaining usages of the old fragment type and verify consistent usage of the new type
# Search for any remaining old fragment usages
echo "Checking for any remaining old fragment usages:"
rg "ProfileItemFragment\$data"
# Search for new fragment usage to ensure consistency
echo -e "\nVerifying consistent usage of new fragment:"
rg "ProfileItemInlineFragment\$data"
# Search for related GraphQL fragment definitions
echo -e "\nChecking related GraphQL fragment definitions:"
rg "fragment ProfileItem(Inline)?Fragment on Profile"
Length of output: 4313
Script:
#!/bin/bash
# Check for any files importing or using either fragment type
echo "Files importing or using ProfileItemFragment:"
rg -l "ProfileItemFragment" --type typescript
echo -e "\nFiles importing or using ProfileItemInlineFragment:"
rg -l "ProfileItemInlineFragment" --type typescript
# Check the actual component usage
echo -e "\nChecking component implementations using these fragments:"
ast-grep --pattern 'type Props = { profiles: $_ }'
Length of output: 571
Script:
#!/bin/bash
# Search for files using either fragment without type specification
echo "Files using ProfileItemFragment:"
rg -l "ProfileItemFragment"
echo -e "\nFiles using ProfileItemInlineFragment:"
rg -l "ProfileItemInlineFragment"
# Look at the actual implementation of the ProfilesList component
echo -e "\nChecking ProfilesList implementation:"
cat "packages/components/modules/profiles/ProfilePopover/ProfilesList/index.tsx"
Length of output: 4622
packages/components/modules/messages/ChatRoomsList/ChatRoomItem/index.tsx (3)
5-5: LGTM! Import changes align with Material-UI adoption
The addition of Material-UI components and updated type naming are consistent with the component's refactoring.
Also applies to: 13-13
108-108: LGTM! Clean export statement
The default export is appropriate for this component.
96-103: Verify unread count behavior
The Badge implementation looks good, but let's verify the unread count handling across the codebase.
✅ Verification successful
Badge implementation for unread count is correctly implemented
The verification shows that the unread count handling is properly implemented:
- The
unreadMessagesCountis correctly sourced from the GraphQL schema and propagated through the type system - The Badge visibility is properly controlled with
showBadge = room.unreadMessagesCount && room.unreadMessagesCount > 0 - The Badge has appropriate max value (99) and error color for unread indicators
- The unread count is properly managed through GraphQL mutations and subscriptions for real-time updates
- The implementation is consistent with the chat room interfaces and fragments across the codebase
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for other implementations of unread count handling
ast-grep --pattern 'unreadMessagesCount'
# Check for any potential edge cases in the tests
fd -e test.tsx -e spec.tsx | xargs rg 'unreadMessagesCount'
Length of output: 100
Script:
#!/bin/bash
# Search for Badge component usage with unread count patterns
rg -A 2 -B 2 'badgeContent.*unread' --type tsx
# Search for unread messages handling in the codebase
rg -A 2 -B 2 'unreadMessages' --type tsx
# Look for test files containing Badge component
fd -e test.tsx -e spec.tsx | xargs rg 'Badge'
# Search for room-related interfaces or types
ast-grep --pattern 'interface $_ {
$$$
unreadMessagesCount
$$$
}'
Length of output: 265
Script:
#!/bin/bash
# Search for Badge component usage with unread count patterns without file type restriction
rg -A 2 -B 2 'badgeContent.*unread'
# Search for unread messages handling in the codebase
rg -A 2 -B 2 'unreadMessages'
# Look for room-related types and interfaces
rg -A 5 -B 1 'interface.*Room'
# Search specifically in the ChatRoomItem directory
fd . packages/components/modules/messages/ChatRoomsList/ChatRoomItem/ -t f | xargs rg 'unread'
Length of output: 39736
packages/components/modules/profiles/context/CurrentProfileProvider/index.tsx (1)
30-30: LGTM! Type-safe fragment reading implementation
The update to use readInlineData with ProfileItemInlineFragment maintains type safety while adapting to the new data structure.
packages/components/modules/profiles/context/CurrentProfileProvider/__tests__/CurrentProfileProvider.test.tsx (2)
30-30: LGTM! Type assertion updated correctly
The type assertion has been properly updated to use ProfileItemInlineFragment$data, maintaining consistency with the imported type. The test scenarios continue to pass, indicating backward compatibility is preserved.
5-5: Verify consistent usage of ProfileItemInlineFragment across the codebase
The change from ProfileItemFragment to ProfileItemInlineFragment suggests a structural change in how profile data is typed. Let's verify this change is consistently applied across related components.
packages/components/modules/messages/MessagesList/index.tsx (3)
11-15: LGTM! Import changes are well-structured
The new imports support the unread messages functionality, and the MessagesGroup import change follows best practices by using a local import.
99-99: Verify overflow behavior impact
While hiding horizontal overflow can prevent unwanted scrollbars, ensure this doesn't affect:
- Long message content display
- Mobile device rendering
- Right-to-left (RTL) language support
✅ Verification successful
Overflow style is safe to use
The overflowX: 'hidden' style on the Virtuoso component is safe based on the codebase analysis:
- Message content has proper overflow handling with ellipsis in chat components (e.g.,
ChatRoomItemusestextOverflow: 'ellipsis') - Mobile support is well-implemented with responsive layouts and device-specific handling
- The codebase uses proper scrollbar components and overflow management patterns throughout
The style addition aligns with existing overflow handling patterns in the design system and won't negatively impact content display or accessibility.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for potential overflow issues in message content
# Search for message content rendering patterns
ast-grep --pattern 'const MessagesGroup = ({ $$ }) => {
$$$
}'
# Look for RTL support implementations
rg -l 'direction:.*rtl|dir=.*rtl'
Length of output: 102
Script:
#!/bin/bash
# Let's try a broader search to understand message content rendering and overflow handling
# Check for message content rendering components and their styles
rg -A 5 -B 5 "className.*message.*content|style.*message.*content"
# Look for Virtuoso component usage and styling
rg -A 5 -B 5 "<Virtuoso.*style"
# Check for any existing overflow-related styles
rg "overflow[XY]?:|overflow-[xy]"
# Look for responsive/mobile-specific styles
rg "(@media|mobile|responsive|screen)"
Length of output: 11931
34-35: Verify profile availability for mutation
The hooks are correctly implemented. However, since the profile ID is used as a required parameter in the mutation, we should verify its availability.
✅ Verification successful
Let me gather more information about the mutation usage and error handling in the MessagesList component.
Let me check the MessagesList component's implementation more thoroughly to understand how it handles the profile and mutation.
Based on the gathered information, I can now provide the final response:
Profile ID is safely used in the mutation
The code correctly handles the profile dependency:
- The mutation is only triggered when there are unread messages (
room?.unreadMessagesCount > 0) - Profile ID is safely accessed with optional chaining (
profile?.id) - The mutation is used within a proper context where both room and profile data are available
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check if useCurrentProfile hook handles loading/error states
# and verify if the component handles cases where profile is undefined
# Search for useCurrentProfile implementation and usage
ast-grep --pattern 'export const useCurrentProfile = () => {
$$$
}'
# Search for error handling patterns around profile usage
rg -A 3 'const \{ profile \}.*useCurrentProfile'
Length of output: 3247
Script:
#!/bin/bash
# Check MessagesList component implementation for error handling
ast-grep --pattern 'const MessagesList = ($$$) => {
$$$
}'
# Check useReadMessageMutation implementation and usage
rg -A 5 'useReadMessageMutation'
# Check if there are any early returns or loading states
rg -A 3 'if \(!profile\)' packages/components/modules/messages/MessagesList/
Length of output: 2135
Script:
#!/bin/bash
# Search for the full MessagesList component implementation
rg -A 20 'const MessagesList.*=' packages/components/modules/messages/MessagesList/index.tsx
# Check how the mutation is used within the component
rg -B 5 -A 5 'commitMutation\(' packages/components/modules/messages/MessagesList/
# Check the mutation implementation to understand required parameters
rg -A 10 'const ReadMessagesMutation = ' packages/components/modules/messages/graphql/mutations/ReadMessages.ts
Length of output: 1860
packages/components/modules/messages/CreateChatRoomList/index.tsx (2)
3-3: LGTM! Clean import organization
The imports are well-structured and properly typed with the new ChangeEventHandler type for event handling.
Also applies to: 11-11, 13-13, 17-21
Line range hint 85-145: Well-structured rendering logic with proper state handling
The component's rendering logic is well-implemented with:
- Proper state management for empty and loading states
- Efficient virtualization for large lists
- Clear separation of rendering concerns
The only pending item is the group chat creation handler implementation.
packages/design-system/CHANGELOG.md (2)
10-11: Verify dependency update impact
The update to @baseapp-frontend/utils@3.0.4 is a major version change from the previous version. Please ensure all breaking changes from utils are handled.
Let's check for potential breaking changes:
✅ Verification successful
Let me gather more information about the version changes.
Breaking changes from utils 3.0.0 have been identified
The update to @baseapp-frontend/utils@3.0.4 includes breaking changes from version 3.0.0 that need attention:
- Token handling changes:
- Removed simple token logic in favor of JWT tokens
- Renamed options from
cookieName/refreshCookieNametoaccessKeyName/refreshKeyName - Deprecated
ACCESS_COOKIE_NAME/REFRESH_COOKIE_NAMEconstants - Modified
createAxiosInstance,baseAppFetch, and token-related functions
Let's verify the usage of these changed features in the design-system package:
No direct impact from utils breaking changes
The design-system package does not use any of the breaking changes introduced in @baseapp-frontend/utils@3.0.0. The package appears to be a safe consumer of utils, likely using only UI-related utilities that weren't affected by the major version changes.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Find package.json files that depend on @baseapp-frontend/utils
fd package.json --exec grep -l "@baseapp-frontend/utils"
# Check the git history for breaking changes
gh pr list --repo silverlogic/baseapp-frontend --search "utils 3.0.4" --json title,body
Length of output: 388
Script:
#!/bin/bash
# Check the current package.json for previous version
cat packages/design-system/package.json | jq -r '.dependencies["@baseapp-frontend/utils"]'
# Check the utils package's recent changes
cat packages/utils/CHANGELOG.md
# Look for potential breaking changes in utils package
cat packages/utils/package.json | jq -r '.version'
Length of output: 8062
Script:
#!/bin/bash
# Check for usage of deprecated constants and functions
rg -l "ACCESS_COOKIE_NAME|REFRESH_COOKIE_NAME|cookieName|refreshCookieName" packages/design-system/
# Check for axios instance or token handling
rg -l "createAxiosInstance|baseAppFetch|getToken" packages/design-system/
Length of output: 177
8-9:
Consider marking this as a breaking change
The removal of NoMessagesIcon that was just added in v0.0.20 could be a breaking change for consumers who have already started using it. Consider:
- Marking this as a breaking change
- Bumping the major version instead of a patch
- Adding a migration guide for users
Let's verify the icon usage in the codebase:
✅ Verification successful
Let me gather more information about the icon usage and changes by checking the actual code files.
Let me try a broader search to understand the icon-related changes.
Let me check the illustrations directory and recent changes to understand the icon migration better.
Let me check one final thing to see if the NoMessagesIcon was replaced by one of these illustrations.
Based on all the gathered information, I can now provide the final response:
Breaking change concern is valid but impact appears minimal
The removal of NoMessagesIcon is indeed a breaking change, but our investigation shows:
- The icon was only recently added in v0.0.20
- No usage of
NoMessagesIconwas found in the codebase outside of CHANGELOG.md - The change is part of a larger icons reorganization, with new illustrations being added
While version 1.0.0 would be ideal for breaking changes, the extremely limited exposure time of this component (one patch version) and lack of usage evidence suggests the current versioning approach is acceptable.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for NoMessagesIcon usage
rg "NoMessagesIcon"
Length of output: 152
Script:
#!/bin/bash
# Search for any icon-related files and their content
fd -e tsx -e ts -e js -e jsx icon -i --exec rg -l "NoMessagesIcon|illustrations" {}
# Check git history for the specific icon file changes
fd -e tsx -e ts -e js -e jsx NoMessagesIcon -i
Length of output: 136
Script:
#!/bin/bash
# Look for any files with 'icon' in their name
fd -t f "icon" -i
# Check the package.json for any icon-related dependencies
cat packages/design-system/package.json
# Look for any illustration-related files
fd "illustration" -i
Length of output: 3449
Script:
#!/bin/bash
# Check the content of the illustrations directory
ls -la packages/design-system/components/illustrations/
# Check if NoMessagesIcon was moved to illustrations
fd -t f -e tsx -e ts "NoMessages" packages/design-system/components/illustrations/
# Look for any recent commits related to these changes
git log --oneline -n 5 packages/design-system/components/illustrations/
Length of output: 3120
Script:
#!/bin/bash
# Check the index.ts file in illustrations to see exports
cat packages/design-system/components/illustrations/index.ts
# Look for any icons directory
fd -t d "icons" packages/design-system/
Length of output: 2871
packages/components/modules/messages/MessagesList/MessagesGroup/index.tsx (2)
Line range hint 1-170: Implementation looks solid! 👍
The changes effectively implement unread message indicators while maintaining good code organization, performance considerations, and component reusability. The use of callbacks and memoization helps prevent unnecessary re-renders.
6-6: Verify the MessageItem import path change impact
The import path for MessageItem has been changed from a relative path to a local path. While this change is valid, we should ensure it doesn't break any existing imports in other files.
Also applies to: 9-9, 13-14, 31-31
✅ Verification successful
Import path change is consistent with the codebase structure
The import path change is correct and follows the existing codebase structure. The search results show that MessageItem is a local component within the MessagesGroup directory, and all related imports (including types and styled components) use relative paths within this module. The current import statement import DefaultMessageItem from './MessageItem' aligns with the component's location and the established import patterns.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for any other imports of MessageItem to ensure consistency
rg "import.*MessageItem.*from.*messages/MessagesList" -g '!**/index.tsx'
Length of output: 74
Script:
#!/bin/bash
# Let's try a broader search for MessageItem imports
rg "import.*MessageItem" -g '*.ts*'
# Also search for MessageItem component definition to understand its location
fd -e ts -e tsx | xargs ast-grep --pattern 'const MessageItem = $_'
Length of output: 1103
README.md (1)
118-121: LGTM! Clear and consistent command usage.
The updated commands align well with the project's use of pnpm and provide clear examples for both specific and general use cases.
packages/design-system/components/illustrations/AddProductsToCartImage/index.tsx (2)
1-6: LGTM! Well-structured component declaration.
The component follows React best practices with proper TypeScript typing and efficient props handling.
49-50: LGTM! Clean export statement.
The export follows React component conventions.
packages/design-system/components/illustrations/CodingImage/index.tsx (3)
1-3: LGTM: Clean and well-structured imports
The imports are minimal and well-organized, correctly importing the necessary types and components.
5-48: LGTM: Well-structured component implementation
The component is well-implemented with proper TypeScript typing, prop handling, and SVG structure.
50-50: LGTM: Clean export statement
The component is properly exported as the default export.
packages/design-system/components/illustrations/ABTestingImage/index.tsx (3)
1-3: LGTM! Clean imports following best practices.
The imports are well-organized, using named imports for better tree-shaking and including proper TypeScript types.
5-68: LGTM! Well-structured component implementation.
The component follows React best practices with proper props handling and Material-UI integration.
70-70: LGTM! Appropriate export statement.
Using default export is suitable for this single-component file.
packages/design-system/components/illustrations/ClickbaitImage/index.tsx (4)
1-6: LGTM! Component declaration follows React best practices.
The component is well-structured with proper typing and efficient props handling.
7-13: LGTM! SVG configuration is properly set up.
The SVG element is correctly configured with consistent dimensions and proper namespace.
114-118: LGTM! Export follows standard conventions.
The default export is appropriate for a single component file.
14-113: Verify SVG optimization.
The SVG paths use currentColor correctly for theme compatibility. Consider verifying if the SVG has been optimized for production use.
✅ Verification successful
SVG is already optimized with proper build tooling
The codebase uses @parcel/optimizer-svgo for SVG optimization during the build process, as evidenced in the dependencies. The SVG paths in the component are already well-structured with:
- Proper use of currentColor for theme compatibility
- Clean path data without unnecessary precision
- Optimized viewBox and dimensions
- No redundant attributes
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check if SVGO is used in the build process for SVG optimization
# Search for SVGO configuration or dependencies
rg -l "svgo" -g "package.json"
# Look for any SVG optimization scripts
rg -l "svg.*optim" -g "*.{json,js,ts}"
Length of output: 69
Script:
#!/bin/bash
# Let's try a broader search for SVG optimization tools and practices
# Check for any SVG-related build tools or optimization references
rg -i "svg.*optimization|optimize.*svg|svgo|svg.*minif"
# Look for SVG-related build scripts or configuration
fd -e json -e js -e ts -e yaml -e yml | xargs rg -l "svg"
# Check the specific file's content to see if it's already optimized
cat "packages/design-system/components/illustrations/ClickbaitImage/index.tsx"
Length of output: 24980
packages/design-system/components/illustrations/ComingSoonImage/index.tsx (3)
1-5: LGTM! Clean imports and proper TypeScript usage.
The component declaration follows best practices with:
- Proper TypeScript types
- Minimal imports
- Correct props destructuring pattern
14-73: LGTM! Well-structured SVG implementation.
The SVG paths are:
- Well-formed and properly structured
- Using currentColor for dynamic theming
- Creating a cohesive illustration
74-78: LGTM! Clean component closure and export.
The component is properly closed and exported using the appropriate default export pattern.
packages/design-system/components/illustrations/BringSolutionsImage/index.tsx (3)
1-3: LGTM! Clean imports with proper TypeScript types.
The imports are minimal and necessary, using appropriate TypeScript types.
5-56: LGTM! Well-structured component with proper prop handling.
The component implementation follows best practices:
- Proper TypeScript typing with FC
- Clean prop spreading with sx override capability
- Theme-compatible using currentColor
- Proper SVG viewBox and path definitions
58-58: LGTM! Proper component export.
Clean default export following React component conventions.
packages/design-system/components/illustrations/BeingCreativeImage/index.tsx (3)
1-5: Clean and well-typed component declaration!
The component is properly typed using FC and SvgIconProps, with clean imports and good props handling.
14-69: Well-structured SVG paths with proper color inheritance!
The SVG paths are well-formatted and correctly use currentColor for fill, allowing proper theme color inheritance.
74-74: Clean default export!
The default export is appropriate for a single-component file.
packages/components/schema.graphql (3)
542-542: Well-designed message read status implementation!
The isRead field with profileId parameter allows for efficient per-user read status tracking, which is a good design choice for scalability.
947-947: LGTM: Consistent interface implementation
The Profile type correctly implements the ChatRoomsInterface by including the unreadMessages parameter in its chatRooms query.
211-211:
Breaking change: New parameter added to interface
Adding the unreadMessages parameter to the chatRooms query in ChatRoomsInterface is a breaking change. Ensure all implementations of this interface are updated accordingly.
packages/design-system/components/illustrations/BusinessDealImage/index.tsx (2)
1-5: LGTM! Clean imports and well-typed component declaration.
The component is properly typed with FC and SvgIconProps, with clean prop destructuring.
58-62: LGTM! Clean component closure and export.
The component is properly structured and exported.
packages/design-system/components/illustrations/ChartsImage/index.tsx (2)
1-6: LGTM! Well-structured component declaration.
The component follows React best practices with proper typing, clean props handling, and good integration with Material-UI.
94-94: LGTM! Clean export.
The default export follows React conventions.
packages/design-system/components/illustrations/AboutUsImage/index.tsx (2)
1-3: LGTM! Clean and necessary imports.
The imports are well-organized and properly typed using TypeScript.
82-82: LGTM! Clean export statement.
The default export follows React component conventions.
| try { | ||
| execSync('pnpm install --lockfile-only', { stdio: 'inherit', cwd: rootDir }) | ||
| console.log('pnpm-lock.yaml has been successfully regenerated.') | ||
| } catch (error) { | ||
| console.error('An error occurred while regenerating pnpm-lock.yaml:', error) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Exit the script if regenerating pnpm-lock.yaml fails
When pnpm install --lockfile-only fails, the script logs the error but continues execution. It's advisable to exit the script with a non-zero status code to indicate that an error has occurred.
Apply this diff to exit upon failure:
} catch (error) {
console.error('An error occurred while regenerating pnpm-lock.yaml:', error)
+ process.exit(1)
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| try { | |
| execSync('pnpm install --lockfile-only', { stdio: 'inherit', cwd: rootDir }) | |
| console.log('pnpm-lock.yaml has been successfully regenerated.') | |
| } catch (error) { | |
| console.error('An error occurred while regenerating pnpm-lock.yaml:', error) | |
| } | |
| try { | |
| execSync('pnpm install --lockfile-only', { stdio: 'inherit', cwd: rootDir }) | |
| console.log('pnpm-lock.yaml has been successfully regenerated.') | |
| } catch (error) { | |
| console.error('An error occurred while regenerating pnpm-lock.yaml:', error) | |
| process.exit(1) | |
| } |
| const packageFolders = fs.readdirSync(packagesPath) | ||
|
|
||
| const foldersToProcess = | ||
| selectedPackages.length > 0 | ||
| ? packageFolders.filter((folder) => selectedPackages.includes(folder)) | ||
| : packageFolders |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling when reading the packages directory
The script assumes that the packages directory exists. If it doesn't, the script will throw an error. Additionally, it's possible that some entries in the packages directory are not directories. Adding error handling and checks can prevent unexpected crashes.
Apply this diff to include error handling and directory checks:
const packagesPath = path.join(rootDir, 'packages')
-let packageFolders = fs.readdirSync(packagesPath)
+let packageFolders
+try {
+ packageFolders = fs.readdirSync(packagesPath)
+} catch (err) {
+ console.error('Failed to read packages directory:', err)
+ process.exit(1)
+}
const foldersToProcess =
selectedPackages.length > 0
? packageFolders.filter((folder) => selectedPackages.includes(folder))
: packageFolders.filter((folder) => {
+ const folderPath = path.join(packagesPath, folder)
+ return fs.lstatSync(folderPath).isDirectory()
})📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const packageFolders = fs.readdirSync(packagesPath) | |
| const foldersToProcess = | |
| selectedPackages.length > 0 | |
| ? packageFolders.filter((folder) => selectedPackages.includes(folder)) | |
| : packageFolders | |
| let packageFolders | |
| try { | |
| packageFolders = fs.readdirSync(packagesPath) | |
| } catch (err) { | |
| console.error('Failed to read packages directory:', err) | |
| process.exit(1) | |
| } | |
| const foldersToProcess = | |
| selectedPackages.length > 0 | |
| ? packageFolders.filter((folder) => selectedPackages.includes(folder)) | |
| : packageFolders.filter((folder) => { | |
| const folderPath = path.join(packagesPath, folder) | |
| return fs.lstatSync(folderPath).isDirectory() | |
| }) |
| const workspaceContent = fs.readFileSync(workspaceConfigPath, 'utf8') | ||
| const workspaceConfig = YAML.parse(workspaceContent) | ||
| const rootCatalog = workspaceConfig.catalog || {} | ||
| const catalogs = workspaceConfig.catalogs || {} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling when reading the workspace configuration file
The function loadWorkspaceCatalogs does not handle errors when reading or parsing the pnpm-workspace.yaml file. If the file is missing or malformed, the script will throw an unhandled exception. Consider adding error handling to improve the script's robustness.
Apply this diff to include error handling:
const loadWorkspaceCatalogs = () => {
- const workspaceContent = fs.readFileSync(workspaceConfigPath, 'utf8')
- const workspaceConfig = YAML.parse(workspaceContent)
+ let workspaceContent
+ try {
+ workspaceContent = fs.readFileSync(workspaceConfigPath, 'utf8')
+ } catch (err) {
+ console.error('Failed to read pnpm-workspace.yaml:', err)
+ process.exit(1)
+ }
+
+ let workspaceConfig
+ try {
+ workspaceConfig = YAML.parse(workspaceContent)
+ } catch (err) {
+ console.error('Failed to parse pnpm-workspace.yaml:', err)
+ process.exit(1)
+ }
+
const rootCatalog = workspaceConfig.catalog || {}
const catalogs = workspaceConfig.catalogs || {}
return { rootCatalog, catalogs }
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const workspaceContent = fs.readFileSync(workspaceConfigPath, 'utf8') | |
| const workspaceConfig = YAML.parse(workspaceContent) | |
| const rootCatalog = workspaceConfig.catalog || {} | |
| const catalogs = workspaceConfig.catalogs || {} | |
| let workspaceContent | |
| try { | |
| workspaceContent = fs.readFileSync(workspaceConfigPath, 'utf8') | |
| } catch (err) { | |
| console.error('Failed to read pnpm-workspace.yaml:', err) | |
| process.exit(1) | |
| } | |
| let workspaceConfig | |
| try { | |
| workspaceConfig = YAML.parse(workspaceContent) | |
| } catch (err) { | |
| console.error('Failed to parse pnpm-workspace.yaml:', err) | |
| process.exit(1) | |
| } | |
| const rootCatalog = workspaceConfig.catalog || {} | |
| const catalogs = workspaceConfig.catalogs || {} |
| const renderTabLabel = (tabValue: ChatTabValues) => ( | ||
| <Box display="grid" gap={1} gridTemplateColumns="1fr min-content" alignItems="center"> | ||
| <Typography variant="subtitle2" color="text.primary"> | ||
| {CHAT_TAB_LABEL[CHAT_TAB_VALUES[tabValue]]} | ||
| </Typography> | ||
| {isRefetchPending && tab === tabValue && <CircularProgress size={15} />} | ||
| </Box> |
There was a problem hiding this comment.
Correct the label access in renderTabLabel.
The expression {CHAT_TAB_LABEL[CHAT_TAB_VALUES[tabValue]]} may not return the intended label. Since tabValue is already a key in CHAT_TAB_LABEL, consider accessing it directly as {CHAT_TAB_LABEL[tabValue]}.
Apply this diff to correct the label access:
- {CHAT_TAB_LABEL[CHAT_TAB_VALUES[tabValue]]}
+ {CHAT_TAB_LABEL[tabValue]}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const renderTabLabel = (tabValue: ChatTabValues) => ( | |
| <Box display="grid" gap={1} gridTemplateColumns="1fr min-content" alignItems="center"> | |
| <Typography variant="subtitle2" color="text.primary"> | |
| {CHAT_TAB_LABEL[CHAT_TAB_VALUES[tabValue]]} | |
| </Typography> | |
| {isRefetchPending && tab === tabValue && <CircularProgress size={15} />} | |
| </Box> | |
| const renderTabLabel = (tabValue: ChatTabValues) => ( | |
| <Box display="grid" gap={1} gridTemplateColumns="1fr min-content" alignItems="center"> | |
| <Typography variant="subtitle2" color="text.primary"> | |
| {CHAT_TAB_LABEL[tabValue]} | |
| </Typography> | |
| {isRefetchPending && tab === tabValue && <CircularProgress size={15} />} | |
| </Box> |
| const SearchNotFoundState = () => ( | ||
| <Box display="grid" justifyItems="center" gridAutoRows="min-content" gap={1.5} padding={4}> | ||
| <SearchingImage sx={{ color: 'grey.500' }} /> | ||
| <Box display="grid" justifyItems="center" gridAutoRows="min-content" gap={0.5}> | ||
| <Typography variant="subtitle2" color="text.primary"> | ||
| No results found | ||
| </Typography> | ||
| <Typography variant="caption" color="text.secondary"> | ||
| Check your spelling or try another search. | ||
| </Typography> | ||
| </Box> | ||
| </Box> | ||
| ) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add TypeScript interface and improve accessibility.
The component should be properly typed and include accessibility attributes for better user experience.
+interface SearchNotFoundStateProps {
+ className?: string;
+}
+
-const SearchNotFoundState = () => (
+const SearchNotFoundState: React.FC<SearchNotFoundStateProps> = ({ className }) => (
- <Box display="grid" justifyItems="center" gridAutoRows="min-content" gap={1.5} padding={4}>
+ <Box
+ display="grid"
+ justifyItems="center"
+ gridAutoRows="min-content"
+ gap={1.5}
+ padding={4}
+ className={className}
+ role="status"
+ aria-label="No search results found"
+ data-testid="search-not-found-state"
+ >📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const SearchNotFoundState = () => ( | |
| <Box display="grid" justifyItems="center" gridAutoRows="min-content" gap={1.5} padding={4}> | |
| <SearchingImage sx={{ color: 'grey.500' }} /> | |
| <Box display="grid" justifyItems="center" gridAutoRows="min-content" gap={0.5}> | |
| <Typography variant="subtitle2" color="text.primary"> | |
| No results found | |
| </Typography> | |
| <Typography variant="caption" color="text.secondary"> | |
| Check your spelling or try another search. | |
| </Typography> | |
| </Box> | |
| </Box> | |
| ) | |
| interface SearchNotFoundStateProps { | |
| className?: string; | |
| } | |
| const SearchNotFoundState: React.FC<SearchNotFoundStateProps> = ({ className }) => ( | |
| <Box | |
| display="grid" | |
| justifyItems="center" | |
| gridAutoRows="min-content" | |
| gap={1.5} | |
| padding={4} | |
| className={className} | |
| role="status" | |
| aria-label="No search results found" | |
| data-testid="search-not-found-state" | |
| > | |
| <SearchingImage sx={{ color: 'grey.500' }} /> | |
| <Box display="grid" justifyItems="center" gridAutoRows="min-content" gap={0.5}> | |
| <Typography variant="subtitle2" color="text.primary"> | |
| No results found | |
| </Typography> | |
| <Typography variant="caption" color="text.secondary"> | |
| Check your spelling or try another search. | |
| </Typography> | |
| </Box> | |
| </Box> | |
| ) |
| endReached={() => { | ||
| if (room?.unreadMessagesCount && room?.unreadMessagesCount > 0) { | ||
| commitMutation({ | ||
| variables: { | ||
| input: { | ||
| roomId: room.id, | ||
| profileId: profile?.id as string, | ||
| }, | ||
| }, | ||
| }) | ||
| } | ||
| }} |
There was a problem hiding this comment.
Add error handling and prevent potential race conditions
The endReached callback needs several improvements for robustness:
- Error handling for failed mutations
- Loading state management
- Protection against concurrent mutations
Consider this implementation:
+ const [isMarkingAsRead, setIsMarkingAsRead] = useState(false)
endReached={() => {
- if (room?.unreadMessagesCount && room?.unreadMessagesCount > 0) {
+ if (room?.unreadMessagesCount > 0 && !isMarkingAsRead) {
+ setIsMarkingAsRead(true)
commitMutation({
variables: {
input: {
roomId: room.id,
profileId: profile?.id as string,
},
},
+ onCompleted: () => {
+ setIsMarkingAsRead(false)
+ },
+ onError: (error) => {
+ console.error('Failed to mark messages as read:', error)
+ setIsMarkingAsRead(false)
+ }
})
}
}}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| endReached={() => { | |
| if (room?.unreadMessagesCount && room?.unreadMessagesCount > 0) { | |
| commitMutation({ | |
| variables: { | |
| input: { | |
| roomId: room.id, | |
| profileId: profile?.id as string, | |
| }, | |
| }, | |
| }) | |
| } | |
| }} | |
| const [isMarkingAsRead, setIsMarkingAsRead] = useState(false) | |
| endReached={() => { | |
| if (room?.unreadMessagesCount > 0 && !isMarkingAsRead) { | |
| setIsMarkingAsRead(true) | |
| commitMutation({ | |
| variables: { | |
| input: { | |
| roomId: room.id, | |
| profileId: profile?.id as string, | |
| }, | |
| }, | |
| onCompleted: () => { | |
| setIsMarkingAsRead(false) | |
| }, | |
| onError: (error) => { | |
| console.error('Failed to mark messages as read:', error) | |
| setIsMarkingAsRead(false) | |
| } | |
| }) | |
| } | |
| }} |
| const profiles = useMemo( | ||
| () => allProfiles?.edges.filter((edge: any) => edge?.node).map((edge: any) => edge?.node) || [], | ||
| [allProfiles], | ||
| ) | ||
|
|
||
| const [isPending, startTransition] = useTransition() | ||
|
|
||
| const renderLoadingState = () => { | ||
| if (!isLoadingNext) return <Box sx={{ paddingTop: 3 }} /> | ||
|
|
||
| return ( | ||
| <LoadingState | ||
| sx={{ paddingTop: 3, paddingBottom: 1 }} | ||
| CircularProgressProps={{ size: 15 }} | ||
| aria-label="loading more comments" | ||
| aria-label="loading more profiles" | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| const renderItem = (item: any) => { | ||
| if (!item) return null | ||
| const renderItem = (profile: ProfileNode) => { | ||
| if (!profile) return null | ||
|
|
||
| return ( | ||
| <ChatRoomListCard | ||
| item={item} | ||
| <ChatRoomListItem | ||
| profile={profile} | ||
| setIsInExistingChatRoomsView={setIsInExistingChatRoomsView} | ||
| isMutationInFlight={isMutationInFlight} | ||
| commit={commit} | ||
| currentProfile={currentProfile} | ||
| {...ChatRoomListCardProps} | ||
| {...ChatRoomListItemProps} | ||
| /> | ||
| ) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve type safety in profiles filtering
The use of any type in the profiles filtering could be replaced with proper types.
-() => allProfiles?.edges.filter((edge: any) => edge?.node).map((edge: any) => edge?.node) || [],
+() => allProfiles?.edges.filter((edge: { node: ProfileNode | null }) => edge?.node)
+ .map((edge: { node: ProfileNode }) => edge.node) || [],📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const profiles = useMemo( | |
| () => allProfiles?.edges.filter((edge: any) => edge?.node).map((edge: any) => edge?.node) || [], | |
| [allProfiles], | |
| ) | |
| const [isPending, startTransition] = useTransition() | |
| const renderLoadingState = () => { | |
| if (!isLoadingNext) return <Box sx={{ paddingTop: 3 }} /> | |
| return ( | |
| <LoadingState | |
| sx={{ paddingTop: 3, paddingBottom: 1 }} | |
| CircularProgressProps={{ size: 15 }} | |
| aria-label="loading more comments" | |
| aria-label="loading more profiles" | |
| /> | |
| ) | |
| } | |
| const renderItem = (item: any) => { | |
| if (!item) return null | |
| const renderItem = (profile: ProfileNode) => { | |
| if (!profile) return null | |
| return ( | |
| <ChatRoomListCard | |
| item={item} | |
| <ChatRoomListItem | |
| profile={profile} | |
| setIsInExistingChatRoomsView={setIsInExistingChatRoomsView} | |
| isMutationInFlight={isMutationInFlight} | |
| commit={commit} | |
| currentProfile={currentProfile} | |
| {...ChatRoomListCardProps} | |
| {...ChatRoomListItemProps} | |
| /> | |
| ) | |
| } | |
| const profiles = useMemo( | |
| () => allProfiles?.edges.filter((edge: { node: ProfileNode | null }) => edge?.node) | |
| .map((edge: { node: ProfileNode }) => edge.node) || [], | |
| [allProfiles], | |
| ) | |
| const renderLoadingState = () => { | |
| if (!isLoadingNext) return <Box sx={{ paddingTop: 3 }} /> | |
| return ( | |
| <LoadingState | |
| sx={{ paddingTop: 3, paddingBottom: 1 }} | |
| CircularProgressProps={{ size: 15 }} | |
| aria-label="loading more profiles" | |
| /> | |
| ) | |
| } | |
| const renderItem = (profile: ProfileNode) => { | |
| if (!profile) return null | |
| return ( | |
| <ChatRoomListItem | |
| profile={profile} | |
| setIsInExistingChatRoomsView={setIsInExistingChatRoomsView} | |
| {...ChatRoomListItemProps} | |
| /> | |
| ) | |
| } |
|
|
||
| - Add Active Tab functionality to the `messages` module. | ||
| - Several tweaks on the messages modules in general. | ||
| - Adapt `ChatRoomListItem` so it uses a fragment. |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Document component rename in changelog
According to the AI summary, ChatRoomListItem was renamed from ChatRoomCard to ChatRoomItem. This breaking change should be explicitly documented in the changelog.
-Adapt `ChatRoomListItem` so it uses a fragment.
+Adapt `ChatRoomListItem` so it uses a fragment (renamed from `ChatRoomCard` to `ChatRoomItem`).📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| - Adapt `ChatRoomListItem` so it uses a fragment. | |
| - Adapt `ChatRoomListItem` so it uses a fragment (renamed from `ChatRoomCard` to `ChatRoomItem`). |
| <svg | ||
| width="200" | ||
| height="200" | ||
| viewBox="0 0 200 200" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M137.1 30.5002C137.6 30.8002 138.1 30.9002 138.6 30.9002C138.7 30.9002 138.7 30.9002 138.8 30.9002C139.4 30.9002 140 30.6002 140.5 30.3002C141 29.9002 141.3 29.4002 141.5 28.8002C141.7 28.2002 141.7 27.6002 141.6 27.0002C141.4 26.2002 140.9 25.5002 140.2 25.1002C139.5 24.7002 138.7 24.6002 137.9 24.8002C137.3 25.0002 136.8 25.3002 136.4 25.7002C136 26.2002 135.7 26.7002 135.7 27.3002C135.6 27.9002 135.7 28.5002 136 29.1002C136.1 29.7002 136.5 30.2002 137.1 30.5002ZM137 26.4002C137.3 26.1002 137.6 25.9002 138 25.8002C138.2 25.8002 138.4 25.7002 138.5 25.7002C138.9 25.7002 139.2 25.8002 139.5 26.0002C140 26.3002 140.3 26.7002 140.5 27.3002C140.6 27.7002 140.6 28.1002 140.5 28.5002C140.4 28.9002 140.1 29.2002 139.8 29.5002C139.5 29.8002 139.1 29.9002 138.7 29.9002C138.3 29.9002 137.9 29.8002 137.5 29.6002C137.1 29.4002 136.9 29.1002 136.7 28.7002C136.5 28.3002 136.5 27.9002 136.5 27.5002C136.6 27.1002 136.8 26.7002 137 26.4002Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M145.9 29.5002C145.5 29.6002 145 29.8002 144.7 30.1002C144.4 30.4002 144.1 30.8002 143.9 31.2002C143.7 31.6002 143.6 32.1002 143.6 32.5002C143.6 32.9002 143.7 33.4002 143.9 33.8002C144.2 34.5002 144.8 35.0002 145.5 35.3002C145.9 35.4002 146.3 35.5002 146.6 35.5002C147 35.5002 147.3 35.4002 147.7 35.3002C148.4 35.0002 149 34.5002 149.4 33.8002C149.8 33.1002 149.8 32.3002 149.6 31.6002C149.4 30.8002 148.9 30.1002 148.2 29.7002C147.5 29.4002 146.7 29.2002 145.9 29.5002ZM147.8 30.6002C148.3 30.9002 148.6 31.3002 148.8 31.9002C148.9 32.4002 148.9 32.9002 148.6 33.4002C148.4 33.9002 148 34.2002 147.5 34.4002C147 34.6002 146.5 34.6002 146 34.4002C145.5 34.2002 145.1 33.8002 144.9 33.4002C144.8 33.1002 144.7 32.8002 144.7 32.5002C144.7 32.2002 144.8 31.9002 144.9 31.6002C145 31.3002 145.2 31.1002 145.5 30.9002C145.7 30.7002 146 30.6002 146.3 30.5002C146.5 30.5002 146.6 30.4002 146.8 30.4002C147.1 30.4002 147.4 30.4002 147.8 30.6002Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M138.2 37.7002C138.3 37.7002 138.4 37.8002 138.5 37.8002C138.7 37.8002 138.8 37.7002 138.9 37.6002L147.3 23.2002C147.4 23.0002 147.4 22.7002 147.1 22.5002C146.9 22.4002 146.6 22.4002 146.4 22.7002L138 37.0002C137.9 37.3002 138 37.6002 138.2 37.7002Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M178 110.1C177.9 109.5 177.7 108.9 177.4 108.4C176.9 107.6 176.2 107 175.4 106.6C174.7 106.3 174 106.2 173.2 106.2L166.6 73.7002L161.5 48.0002L167.7 42.5002C168.1 42.8002 168.5 43.0002 168.9 43.0002C169.1 43.0002 169.2 43.0002 169.4 43.0002C169.8 43.0002 170.2 42.9002 170.5 42.8002C171 42.6002 171.4 42.2002 171.7 41.7002C172 41.2002 172.1 40.7002 172.1 40.1002C172.1 39.5002 171.9 39.0002 171.6 38.6002C171.3 38.1002 170.8 37.8002 170.3 37.6002C169.7 37.4002 169 37.3002 168.4 37.5002C167.8 37.7002 167.3 38.1002 166.9 38.7002C166.6 39.2002 166.4 39.9002 166.5 40.5002C166.5 40.9002 166.7 41.3002 166.9 41.6002L160.5 47.3002C160.4 47.4002 160.3 47.6002 160.3 47.8002L163 61.4002L106.1 97.6002C106 97.7002 105.9 97.8002 105.9 98.0002C105.9 98.2002 105.9 98.3002 106.1 98.4002L128.4 118.5C128.5 118.6 128.6 118.6 128.7 118.6C128.8 118.6 128.9 118.6 128.9 118.5L170 96.1002L172 106.2C171.3 106.4 170.6 106.7 170.1 107.3C169.4 107.9 168.9 108.7 168.7 109.6C168.5 110.5 168.5 111.4 168.9 112.3C169 112.5 169.1 112.7 169.2 112.9L149 127C148.4 126.2 147.6 125.6 146.7 125.2C145.8 124.9 144.7 124.9 143.8 125.2C142.9 125.5 142 126.1 141.4 126.9C141 127.4 140.8 128 140.6 128.5C140.5 129.1 140.4 129.7 140.5 130.3C140.6 130.9 140.8 131.5 141.1 132C141.6 132.8 142.4 133.5 143.3 133.9C143.9 134.1 144.5 134.2 145 134.2C145.4 134.2 145.8 134.2 146.2 134.1C147.2 133.8 148 133.3 148.7 132.5C149.3 131.7 149.7 130.8 149.7 129.8C149.7 129.1 149.6 128.5 149.4 127.9L169.8 113.9C170 114.2 170.3 114.4 170.6 114.6C171.3 115.1 172.2 115.5 173.2 115.5C173.3 115.5 173.3 115.5 173.4 115.5C174.3 115.5 175.1 115.3 175.8 114.8C176.9 114.2 177.6 113.1 177.9 111.9C178 111.3 178.1 110.7 178 110.1ZM128.9 117.6L107.3 98.2002L163.3 62.5002L165.3 72.6002L169.8 95.1002L128.9 117.6Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M141.9 155.9C141.9 155.8 141.8 155.8 141.7 155.8C140.6 155.1 139.4 154.4 138.2 153.8C135.6 152.4 133.4 150.5 131.4 148.3L131 147.9C133.1 145.2 133.9 143 132.9 141.9C132.8 141.8 132.8 141.8 132.7 141.7C132.7 141.7 132.7 141.6 132.6 141.6L103.9 115.4C102.5 114.1 100.8 112.9 99.1 112C89.6 106.8 79.6 102.1 69.6 98.1002C69.5 97.7002 69.4 97.2002 69.2 96.8002C70.9 93.7002 72.4 90.5002 73.6 87.3002C74.2 87.7002 74.8 88.0002 75.4 88.4002C75.5 88.5002 75.5 88.5002 75.6 88.5002C77.8 89.8002 80.1 90.8002 82.5 91.6002C84.2 92.2002 86.1 92.3002 87.9 91.7002C94.6 89.7002 101.2 87.1002 107.5 84.1002C107.7 84.0002 107.8 83.8002 107.8 83.6002C107.8 83.5002 107.8 83.4002 107.7 83.2002C109.3 82.6002 114.9 80.6002 118.3 77.7002C119.3 78.0002 120.4 78.2002 121.5 78.3002C121.6 78.3002 121.8 78.3002 121.9 78.3002C124.9 78.3002 127.7 77.2002 129.9 75.3002C132.2 73.3002 133.7 70.4002 134 67.4002C134.3 64.3002 133.4 61.3002 131.6 58.8002C129.7 56.3002 127 54.7002 124 54.2002C120.9 53.7002 117.8 54.3002 115.2 56.0002C112.6 57.7002 110.8 60.3002 110 63.3002C109.3 66.2002 109.7 69.1002 111 71.7002C108.9 73.0002 106.7 74.3002 104.4 75.3002C104.3 75.2002 104.3 75.1002 104.2 75.0002C104.1 74.8002 103.8 74.8002 103.6 74.9002C98 77.5002 92.2 79.3002 86.1 80.5002C81.5 78.8002 77.1 76.6002 73 73.9002C73 73.9002 73 73.9002 72.9 73.8002C72.6 73.6002 72.3 73.4002 72 73.2002C70.7 72.3002 70.9 70.5002 71.3 69.3002C72.4 69.7002 73.4 69.7002 74.2 69.2002C75.7 68.3002 76.4 66.0002 76.5 62.3002C76.5 62.1002 76.5 61.8002 76.5 61.6002V61.3002C76.5 60.6002 76.5 59.7002 76.5 58.9002C76.7 58.0002 76.6 57.1002 76.5 56.2002C77 55.4002 77.2 54.5002 77.1 53.6002C77 52.6002 76.6 51.7002 75.9 51.0002C75.2 50.3002 74.3 49.9002 73.3 49.8002C72.4 49.7002 71.5 49.9002 70.7 50.4002C69.4 50.1002 68.1 50.2002 66.8 50.7002C66.4 50.1002 65.8 49.6002 65.1 49.2002C64.3 48.8002 63.4 48.5002 62.5 48.5002C61.6 48.5002 60.7 48.7002 59.9 49.2002C59.1 49.7002 58.4 50.3002 58 51.1002C57.5 51.9002 57.3 52.8002 57.3 53.7002C57.3 54.6002 57.5 55.5002 57.9 56.3002C58.3 57.1002 59 57.8002 59.7 58.3002C60.4 58.7002 61.1 59.0002 61.8 59.1002C62.1 60.7002 62.8 62.1002 63.9 63.2002C63.9 63.2002 67.3 67.3002 65.2 69.1002C64.4 69.4002 63.4 69.1002 62.3 68.1002C52 59.1002 44.9 52.0002 37.4 39.5002C37.4 39.4002 37.3 39.4002 37.3 39.4002C37.1 39.1002 36.8 38.9002 36.5 38.8002C36.2 38.7002 36 38.7002 35.7 38.7002C34.5 36.5002 33.2 33.4002 33.6 30.9002C34.2 27.7002 33.9 26.9002 33.3 26.7002C32.7 26.5002 32 27.0002 30.7 29.7002C30.3 28.5002 29.9 27.3002 29.6 26.0002C28.9 23.2002 28.2 22.9002 27.7 22.9002C27.2 23.0002 26.8 23.3002 26.7 25.6002C26 23.4002 25.4 22.6002 24.7 22.7002C24.3 22.8002 23.8 23.2002 24 25.6002C23.7 25.4002 23.5 25.4002 23.3 25.4002C23 25.5002 22.2 25.6002 22.7 29.2002C22.8 30.1002 23 30.9002 23.3 31.8002C23 31.7002 22.8 31.6002 22.5 31.8002C21.7 32.2002 22.2 33.5002 22.8 34.8002C24.2 37.8002 26.2 41.5002 27.7 44.1002C27.6 44.4002 27.5 44.7002 27.5 45.0002C27.5 45.3002 27.6 45.6002 27.7 45.9002C27.7 46.0002 27.7 46.0002 27.7 46.1002C32.3 55.4002 41.8 66.2002 53.7 76.0002C55.3 81.7002 56.7 87.5002 57.8 93.3002C56 94.8002 45.3 104 48.3 112.6C50.7 119.7 61.1 125.4 79.3 129.7C77.1 141.3 74.1 152.8 70.6 164C70.5 164.2 70.5 164.4 70.5 164.6C70.3 166.3 72.5 168 76.5 169.2L75.6 176.6C75.6 176.7 75.6 176.8 75.6 176.9C76.7 180.1 79.1 186.7 87.9 194.9C88 195 88.1 195 88.2 195H88.3C88.5 195 88.6 194.8 88.7 194.7C89.7 191.8 89.5 187.7 89.2 184.2V184.1C89 182.3 88.8 180.7 88.6 179.5C88.1 176.6 88.1 173.7 88.4 170.7V170.4C92 170.1 94.3 169 94.6 167.5C94.6 167.4 94.7 167.4 94.7 167.3C96.1 154.9 96.6 142.3 96.2 129.8L114.6 157C114.7 157.1 114.7 157.3 114.8 157.4C115.2 157.8 115.7 158 116.5 158C117.9 158 119.9 157.2 122.3 155.8L127.9 161.8C128 161.9 128 161.9 128.1 161.9C132.8 163.6 137.8 164.4 142.7 164.4C145.4 164.4 148 164.2 150.7 163.7C150.9 163.7 151 163.5 151.1 163.4C151.2 163.2 151.1 163 151 162.9C148.1 160.2 145.1 157.9 141.9 155.9ZM137.8 154.6C138.7 155.1 139.5 155.6 140.4 156.1C135.7 157.6 130.8 158.3 125.9 158.3L118.6 150.5C119.8 149.2 121.1 147.9 122 147.2C122.8 146.5 124.4 145.3 126.3 144.2L130.2 148.2L130.8 148.8C132.7 151.2 135.1 153.1 137.8 154.6ZM116.9 77.6002C116.9 77.4002 116.9 77.2002 116.8 76.9002C117 77.0002 117.2 77.1002 117.4 77.2002C117.2 77.4002 117.1 77.5002 116.9 77.6002ZM111.3 63.4002C112 60.6002 113.7 58.3002 116 56.7002C118.4 55.1002 121.2 54.5002 124 55.0002C126.8 55.5002 129.3 57.0002 131 59.3002C132.7 61.6002 133.5 64.4002 133.2 67.2002C132.9 70.0002 131.6 72.6002 129.4 74.5002C127.3 76.4002 124.5 77.4002 121.7 77.3002C118.9 77.2002 116.2 76.0002 114.2 74.0002L114.1 73.9002C114 73.8002 113.9 73.7002 113.8 73.5002C114.6 72.8002 116.8 70.8002 116.9 69.5002C117 69.0002 116.7 68.8002 116.6 68.7002C116 68.3002 114.9 69.0002 112.7 70.5002C112.5 70.7002 112.3 70.8002 112.1 70.9002C111 68.7002 110.6 66.0002 111.3 63.4002ZM112.2 72.2002C112.5 72.0002 112.9 71.7002 113.4 71.4002C114.1 70.9002 115.3 70.1002 115.9 69.8002C115.4 70.7002 114 72.1002 113 72.9002C112.9 73.0002 112.8 73.2002 112.8 73.3002C112.9 74.1002 112.4 75.5002 109.6 77.5002C109.4 77.7002 109.3 78.0002 109.5 78.2002C109.6 78.3002 109.8 78.4002 109.9 78.4002C110 78.4002 110.1 78.4002 110.2 78.3002C112 77.0002 113.2 75.8002 113.7 74.7002C114.3 75.3002 115 75.9002 115.8 76.3002C115.9 76.8002 116 77.2002 116 77.7002C116 77.9002 116.1 78.0002 116.3 78.1002C113.2 80.1002 109.3 81.6002 107.9 82.1002C107.5 79.9002 106.6 77.9002 105.4 76.0002C107.7 74.9002 110 73.6002 112.2 72.2002ZM63.9 70.1002C65.3 71.3002 66.6 72.3002 67.8 73.0002L63.5 73.4002L63.9 70.1002ZM72.4 74.6002L72.2 76.5002L70 74.1002C70.8 74.4002 71.6 74.6002 72.4 74.6002ZM73.9 68.3002C73.3 68.7002 72.5 68.6002 71.5 68.2002C71 67.9002 70.5 67.6002 70 67.2002C69.8 67.1002 69.6 67.1002 69.4 67.2002C69.2 67.3002 69.1 67.6002 69.2 67.8002L70.3 70.9002C70.3 71.9002 70.5 72.8002 71.1 73.5002C69.3 73.0002 67.3 71.8002 65.1 70.0002C65.3 70.0002 65.4 69.9002 65.6 69.9002C65.6 69.9002 65.7 69.9002 65.7 69.8002C65.7 69.8002 65.7 69.8002 65.8 69.8002C67.2 69.2002 68.2 67.5002 68.7 64.7002C68.8 64.3002 68.7 63.9002 68.6 63.5002C68.6 63.4002 68.5 63.4002 68.5 63.3002C67.4 62.0002 67.6 61.2002 67.7 60.9002C67.8 60.7002 68 60.5002 68.2 60.5002C68.4 60.5002 68.6 60.6002 68.7 60.9002C69 61.4002 69.3 61.9002 69.9 61.9002C70.4 61.9002 70.7 61.3002 70.8 61.1002C71.4 59.6002 73.3 58.0002 74.4 58.2002C75.3 58.4002 75.7 59.7002 75.7 61.8002V62.2002C75.7 66.4002 74.7 67.8002 73.9 68.3002ZM24.9 24.1002C25.1 24.4002 25.3 25.0002 25.7 26.0002C26.1 27.1002 26.4 28.1002 26.8 28.9002C26.9 29.6002 27 30.2002 27.1 30.8002C26.8 31.2002 26.6 31.6002 26.3 32.0002C25.7 30.1002 25.2 28.2002 25 26.2002C24.8 25.2002 24.8 24.5002 24.9 24.1002ZM23.5 26.8002C23.7 27.1002 24 27.8002 24.4 29.0002C24.4 29.0002 24.4 29.1002 24.5 29.1002C24.8 30.6002 25.2 32.0002 25.7 33.4002C25.5 33.9002 25.4 34.4002 25.3 34.9002C24.5 33.1002 24 31.2002 23.7 29.2002C23.4 28.0002 23.5 27.2002 23.5 26.8002ZM23 33.0002C23.3 33.2002 23.6 33.5002 23.8 33.9002C24.2 34.9002 24.6 35.9002 25 36.9002C25.1 37.1002 25.2 37.2002 25.4 37.2002C25.6 37.2002 25.8 37.1002 25.9 36.9002C25.9 36.9002 25.9 36.9002 25.9 36.8002C25.9 36.8002 25.9 36.8002 25.9 36.7002C26 35.7002 26.2 34.7002 26.5 33.8002C26.6 33.7002 26.6 33.6002 26.6 33.5002C27.1 32.4002 27.7 31.3002 28.5 30.4002C28.7 30.2002 28.7 29.9002 28.5 29.7002C28.3 29.5002 28 29.5002 27.8 29.7002C27.8 29.7002 27.8 29.7002 27.7 29.8002C27.6 29.5002 27.6 29.2002 27.5 28.8002C27.5 28.8002 27.5 28.8002 27.5 28.7002C27.4 28.0002 27.4 27.3002 27.4 26.6002C27.4 25.2002 27.5 24.5002 27.6 24.2002C27.8 24.5002 28 25.1002 28.3 26.3002C28.7 27.9002 29.2 29.5002 29.8 31.1002C28.8 34.2002 28.4 39.3002 28.4 39.5002C28.4 39.8002 28.6 40.0002 28.9 40.0002C29.2 40.0002 29.4 39.8002 29.4 39.5002C29.4 39.4002 29.9 33.0002 31.2 30.3002C32 28.7002 32.5 28.0002 32.7 27.7002C32.7 28.1002 32.7 28.9002 32.4 30.5002C31.7 34.8002 35.3 40.3002 36.2 41.5002C35.7 42.4002 34.7 43.5002 33.5 44.4002C32.2 45.3002 30.7 45.9002 29.6 46.0002C29.4 45.6002 28.9 44.8002 28.3 43.8002C28.3 43.7002 28.2 43.7002 28.2 43.6002C26.8 41.1002 24.7 37.2002 23.3 34.3002C23.2 33.7002 23.1 33.2002 23 33.0002ZM29.2 47.1002C29.3 47.1002 29.4 47.1002 29.5 47.1002H29.6C29.6 47.1002 29.6 47.1002 29.7 47.1002C31 47.1002 32.8 46.4002 34.4 45.3002C36 44.2002 37.2 42.8002 37.6 41.5002C44.9 53.1002 51.8 60.0002 61.8 68.5002C62.2 68.9002 62.6 69.1002 63 69.3002L62.4 73.7002C62.4 73.8002 62.4 74.0002 62.5 74.1002C62.6 74.2002 62.7 74.3002 62.9 74.3002L68.5 73.8002L72.2 77.9002C72.3 78.0002 72.4 78.1002 72.6 78.1002C72.7 78.1002 72.7 78.1002 72.8 78.1002C73 78.0002 73.1 77.9002 73.1 77.7002L73.4 75.0002C77.4 77.6002 81.8 79.7002 86.3 81.3002C86.4 81.3002 86.5 81.3002 86.6 81.3002C92.6 80.1002 98.5 78.3002 104.1 75.8002C105.6 77.9002 106.6 80.3002 107 82.8002V82.9002C107 83.0002 107 83.1002 107 83.2002C100.8 86.1002 94.4 88.6002 87.9 90.6002C86.4 91.1002 84.7 91.0002 83.1 90.5002C80.8 89.7002 78.5 88.7002 76.4 87.5002L75 82.0002C75 81.4002 75 80.9002 75 80.3002C75 80.0002 74.8 79.8002 74.5 79.8002C74.2 79.8002 74 80.1002 74 80.3002C74.1 82.3002 73.8 84.3002 73.1 86.2002C71.9 89.6002 70.4 92.9002 68.6 96.0002L58.5 93.1002C57.8 89.3002 57 85.5002 56 81.8002L57.4 78.4002C57.5 78.2002 57.4 78.0002 57.3 77.8002L54.2 75.3002C43.1 66.2002 34 56.0002 29.2 47.1002ZM87.1 170.3V170.6C86.8 173.6 86.9 176.6 87.3 179.6C87.4 180.5 87.6 181.7 87.8 183.1C83.8 180.1 80.1 176.6 76.8 172.8L78 162.4C80 162.3 82 162.4 83.5 162.6C84.9 162.8 86.4 163.1 87.9 163.5C87.2 169.6 87.2 170 87.1 170.3ZM93.6 165.3C91.1 162.7 83.7 161.6 83.6 161.6C81.4 161.3 74.9 160.9 71.9 162.5C74 155.8 75.8 149.1 77.5 142.2L82.3 130C82.4 129.9 82.3 129.7 82.3 129.6C82.2 129.5 82.1 129.4 82 129.3L79.9 128.8C57.3 123.6 50.6 117 49 112.3C46.3 104.4 56.7 95.3002 58.2 94.1002L68.4 97.1002C68.5 97.6002 68.7 98.0002 68.8 98.5002C68.8 98.6002 68.8 98.7002 68.9 98.7002C69.3 100.4 69.7 102.1 69.9 103.8C69.3 103.4 68.6 103.1 68 102.7C67.8 102.6 67.5 102.7 67.3 102.9C67.2 103.1 67.3 103.4 67.5 103.6C76 108.3 84.1 113.8 91.6 120C92.5 120.8 93.3 121.7 93.8 122.8C94.3 123.9 94.7 125 94.7 126.3C95.4 139.2 95 152.3 93.6 165.3ZM95.8 126.1C95.7 124.7 95.4 123.4 94.8 122.2C94.2 121 93.3 119.9 92.3 119.1C85.7 113.6 78.5 108.6 71 104.3C70.8 102.6 70.5 100.9 70.1 99.2002C79.9 103.2 89.5 107.8 98.8 112.8C100.5 113.7 102 114.8 103.4 116.1L130.8 141.1C129.8 141.2 128.6 141.7 127 142.5C126.7 142.7 126.4 142.9 126 143C125.9 143 125.9 143.1 125.8 143.1C123.8 144.3 122 145.7 121.2 146.4C120.3 147.1 118.9 148.5 117.5 150.1C117.5 150.1 117.5 150.1 117.4 150.1L117.3 150.2C115.9 151.8 114.6 153.6 114.2 155L95.8 127.8C95.9 127.3 95.8 126.7 95.8 126.1Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M53.9 142.5L49.3 141.3L50.5 136.7C50.6 136.4 50.4 136.2 50.1 136.1C49.8 136 49.6 136.2 49.5 136.5L48.3 141.1L43.7 139.9C43.4 139.8 43.2 140 43.1 140.3C43 140.6 43.2 140.8 43.5 140.9L48 142L46.8 146.6C46.7 146.9 46.9 147.1 47.2 147.2H47.3C47.5 147.2 47.7 147.1 47.8 146.8L49 142.2L53.6 143.4H53.7C53.9 143.4 54.1 143.3 54.2 143C54.3 142.8 54.1 142.6 53.9 142.5Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M87.2 32.3002L96.6 34.7002H96.7C96.9 34.7002 97.1 34.6002 97.2 34.3002L100.7 20.7002C100.7 20.5002 100.7 20.4002 100.6 20.2002L98 17.3002C99.1 15.6002 98.8 13.7002 98.6 12.0002C98.3 9.60017 98 7.50017 100.8 5.90017C101 5.80017 101.1 5.50017 101 5.20017C100.9 5.00017 100.6 4.90017 100.3 5.00017C96.9 7.00017 97.3 9.70017 97.6 12.2002C97.8 13.8002 98 15.3002 97.3 16.6002L96.8 16.0002C96.7 15.8002 96.5 15.8002 96.3 15.9002L90.8 17.8002C90.6 17.9002 90.5 18.0002 90.5 18.1002L87 31.7002C87 31.8002 87 32.0002 87.1 32.1002C87 32.2002 87.1 32.3002 87.2 32.3002Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M117.7 64.1002L121.4 66.2002L119.3 70.0002C119.2 70.2002 119.2 70.5002 119.5 70.7002C119.6 70.7002 119.7 70.8002 119.7 70.8002C119.9 70.8002 120 70.7002 120.1 70.5002L122.2 66.7002L126 68.8002C126.1 68.8002 126.2 68.9002 126.2 68.9002C126.4 68.9002 126.5 68.8002 126.6 68.6002C126.7 68.4002 126.7 68.1002 126.4 67.9002L122.6 65.8002L124.7 62.1002C124.8 61.9002 124.8 61.6002 124.5 61.4002C124.3 61.3002 124 61.3002 123.8 61.6002L121.7 65.3002L118 63.2002C117.8 63.1002 117.5 63.1002 117.3 63.4002C117.4 63.6002 117.5 63.9002 117.7 64.1002Z" | ||
| fill="currentColor" | ||
| /> | ||
| </svg> | ||
| </SvgIcon> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add accessibility attributes to the SVG.
The SVG illustration should be made accessible to screen readers.
Apply this diff to improve accessibility:
<svg
width="200"
height="200"
viewBox="0 0 200 200"
fill="none"
xmlns="http://www.w3.org/2000/svg"
+ role="img"
+ aria-label="Add products to cart illustration"
>| const AboutUsImage: FC<SvgIconProps> = ({ sx, ...props }) => ( | ||
| <SvgIcon sx={{ fontSize: 200, color: 'primary.dark', ...sx }} {...props}> | ||
| <svg | ||
| width="200" | ||
| height="200" | ||
| viewBox="0 0 200 200" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M32.2001 86.4004C32.0001 86.4004 31.9001 86.5004 31.8001 86.6004C31.7001 86.7004 31.6001 86.9004 31.6001 87.0004C31.6001 87.2004 31.7001 87.3004 31.8001 87.4004C31.9001 87.5004 32.1001 87.6004 32.2001 87.6004C32.4001 87.6004 32.5001 87.5004 32.6001 87.4004C32.7001 87.3004 32.8001 87.1004 32.8001 87.0004C32.8001 86.8004 32.7001 86.7004 32.6001 86.6004C32.5001 86.5004 32.4001 86.4004 32.2001 86.4004Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M40.8001 80.7004C40.6001 80.7004 40.5001 80.8004 40.3001 80.9004C40.2001 81.0004 40.1001 81.2004 40.1001 81.4004C40.1001 81.5004 40.1001 81.6004 40.1001 81.6004C40.1001 81.7004 40.2001 81.7004 40.2001 81.8004C40.3001 81.9004 40.3001 81.9004 40.4001 81.9004C40.5001 81.9004 40.6001 81.9004 40.6001 81.9004H40.8001C40.9001 81.9004 40.9001 81.8004 41.0001 81.8004C41.1001 81.7004 41.1001 81.7004 41.1001 81.6004C41.1001 81.5004 41.1001 81.4004 41.1001 81.4004C41.1001 81.2004 41.0001 81.1004 40.9001 80.9004C41.2001 80.8004 41.0001 80.7004 40.8001 80.7004Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M49.1001 87.1004C48.9001 87.1004 48.8001 87.2004 48.6001 87.3004C48.5001 87.4004 48.4001 87.6004 48.4001 87.8004C48.4001 88.0004 48.5001 88.1004 48.6001 88.3004C48.7001 88.4004 48.9001 88.5004 49.1001 88.5004C49.3001 88.5004 49.4001 88.4004 49.6001 88.3004C49.7001 88.2004 49.8001 88.0004 49.8001 87.8004C49.8001 87.6004 49.7001 87.5004 49.6001 87.3004C49.4001 87.1004 49.3001 87.1004 49.1001 87.1004Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M60.4001 90.1004C60.6001 90.1004 60.7001 90.0004 60.9001 89.9004C61.0001 89.8004 61.1001 89.6004 61.1001 89.4004C61.1001 89.2004 61.0001 89.1004 60.9001 88.9004C60.8001 88.8004 60.6001 88.7004 60.4001 88.7004C60.2001 88.7004 60.1001 88.8004 59.9001 88.9004C59.8001 89.0004 59.7001 89.2004 59.7001 89.4004C59.7001 89.6004 59.8001 89.7004 59.9001 89.9004C60.0001 90.1004 60.2001 90.1004 60.4001 90.1004Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M66.2001 80.3004C66.4001 80.3004 66.5001 80.2004 66.7001 80.1004C66.8001 80.0004 66.9001 79.8004 66.9001 79.6004C66.9001 79.4004 66.8001 79.3004 66.7001 79.1004C66.6001 79.0004 66.4001 78.9004 66.2001 78.9004C66.0001 78.9004 65.9001 79.0004 65.7001 79.1004C65.6001 79.2004 65.5001 79.4004 65.5001 79.6004C65.5001 79.8004 65.6001 79.9004 65.7001 80.1004C65.9001 80.2004 66.1001 80.3004 66.2001 80.3004Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M76.7001 80.0004C76.8001 80.1004 76.8001 80.1004 76.9001 80.1004C77.0001 80.1004 77.1001 80.1004 77.1001 80.1004H77.3001C77.4001 80.1004 77.4001 80.0004 77.5001 80.0004C77.6001 79.9004 77.6001 79.9004 77.6001 79.8004C77.6001 79.7004 77.6001 79.6004 77.6001 79.6004C77.6001 79.4004 77.5001 79.3004 77.4001 79.1004C77.3001 79.0004 77.1001 78.9004 76.9001 78.9004C76.7001 78.9004 76.6001 79.0004 76.4001 79.1004C76.3001 79.2004 76.2001 79.4004 76.2001 79.6004C76.2001 79.7004 76.2001 79.8004 76.2001 79.8004C76.2001 79.8004 76.7001 79.9004 76.7001 80.0004Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M80.9001 71.5004C81.1001 71.5004 81.2001 71.4004 81.4001 71.3004C81.5001 71.2004 81.6001 71.0004 81.6001 70.8004C81.6001 70.6004 81.5001 70.5004 81.4001 70.3004C81.3001 70.2004 81.1001 70.1004 80.9001 70.1004C80.7001 70.1004 80.6001 70.2004 80.4001 70.3004C80.3001 70.4004 80.2001 70.6004 80.2001 70.8004C80.2001 71.0004 80.3001 71.1004 80.4001 71.3004C80.6001 71.4004 80.7001 71.5004 80.9001 71.5004Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M55.2001 98.8004C55.3001 98.9004 55.3001 98.9004 55.4001 98.9004C55.5001 98.9004 55.6001 98.9004 55.6001 98.9004H55.8001C55.8001 98.9004 55.9001 98.8004 56.0001 98.8004C56.1001 98.7004 56.1001 98.7004 56.1001 98.6004C56.1001 98.5004 56.1001 98.4004 56.1001 98.4004C56.1001 98.2004 56.0001 98.1004 55.9001 97.9004C55.8001 97.8004 55.6001 97.7004 55.4001 97.7004C55.2001 97.7004 55.1001 97.8004 54.9001 97.9004C55.0001 98.0004 55.0001 98.1004 55.0001 98.3004C55.0001 98.4004 55.0001 98.5004 55.0001 98.5004C55.0001 98.5004 55.1001 98.7004 55.2001 98.8004Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M65.6001 98.3004C65.8001 98.3004 65.9001 98.2004 66.1001 98.1004C66.2001 98.0004 66.3001 97.8004 66.3001 97.6004C66.3001 97.4004 66.2001 97.3004 66.1001 97.1004C66.0001 96.9004 65.7001 97.0004 65.6001 97.0004C65.5001 97.0004 65.3001 97.1004 65.1001 97.2004C65.0001 97.3004 64.9001 97.5004 64.9001 97.7004C64.9001 97.9004 65.0001 98.0004 65.1001 98.2004C65.2001 98.3004 65.4001 98.3004 65.6001 98.3004Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M107.2 65.5004C107 65.5004 106.9 65.6004 106.8 65.7004C106.7 65.8004 106.6 66.0004 106.6 66.1004C106.6 66.2004 106.6 66.3004 106.6 66.4004C106.6 66.5004 106.7 66.6004 106.7 66.6004C106.7 66.6004 106.8 66.7004 106.9 66.7004C107 66.7004 107.1 66.8004 107.2 66.8004C107.3 66.8004 107.4 66.8004 107.5 66.7004C107.6 66.7004 107.7 66.6004 107.7 66.6004C107.7 66.6004 107.8 66.5004 107.8 66.4004C107.8 66.3004 107.8 66.2004 107.8 66.1004C107.8 65.9004 107.7 65.8004 107.6 65.7004C107.5 65.5004 107.3 65.5004 107.2 65.5004Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M171.7 81.6004C171.9 81.6004 172 81.5004 172.2 81.4004C172.3 81.3004 172.4 81.1004 172.4 80.9004C172.4 80.7004 172.3 80.6004 172.2 80.4004C172.1 80.3004 171.9 80.2004 171.7 80.2004C171.5 80.2004 171.4 80.3004 171.2 80.4004C171.1 80.5004 171 80.7004 171 80.9004C171 81.1004 171.1 81.2004 171.2 81.4004C171.4 81.5004 171.5 81.6004 171.7 81.6004Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M195 101.9C195 101.5 194.8 101.3 194.5 101.1C193.6 100.4 191.6 100.9 188.4 101.6C186.2 102.1 183.7 102.7 182 102.6C181 102.5 179.9 102.6 178.9 102.9C177.8 103.2 177.2 103.9 176.5 104.7C175.9 105.4 175.2 106.2 173.9 107C173.3 106.6 172.7 106.3 172 106C171.8 105.9 171.6 106 171.5 106.1L157.4 119.2C156.8 115.9 154 104.6 146.2 99.8004C146.1 97.6004 145.9 95.4004 145.5 93.3004C145.6 92.9004 145.7 92.6004 145.9 92.3004C146.1 91.8004 146.3 91.3004 146.4 90.8004C157.2 91.3004 167.2 90.3004 176.5 89.2004C176.5 89.2004 176.5 89.2004 176.6 89.2004C176.9 89.2004 177.4 88.9004 177.7 88.2004C178.7 88.1004 181.6 87.9004 182.3 87.9004C183.4 87.8004 184.6 87.6004 185.7 87.5004L186.9 87.3004C187.5 87.2004 188.2 87.1004 188.8 87.0004C190.6 86.7004 191.4 86.2004 191.3 85.5004C191.2 85.0004 190.8 84.7004 189.7 84.6004C189.9 84.5004 190.1 84.5004 190.4 84.4004C192.1 84.0004 192.9 83.4004 192.8 82.8004C192.7 82.2004 191.9 81.9004 190.1 82.1004C190 82.1004 189.8 82.1004 189.7 82.1004C190.1 82.0004 190.6 81.9004 191 81.7004C191.9 81.4004 193.5 80.9004 193.3 80.0004C193.2 79.3004 192.3 79.1004 190.6 79.4004C190.5 79.4004 189.6 79.5004 188.5 79.7004L189.2 79.4004C190.1 79.0004 191.5 78.2004 191.2 77.3004C191 76.7004 190 76.6004 188.4 77.1004C188.1 77.2004 184 78.4004 183.5 78.5004C183 78.6004 182.7 78.6004 182.5 78.5004C182.4 78.0004 182.6 77.2004 182.8 76.4004C183.1 74.9004 183.4 73.5004 182.3 73.1004C181.7 72.9004 180.8 73.2004 179 77.0004C178.6 77.8004 178 78.0004 177 78.1004C176.5 77.3004 176 77.1004 175.6 77.0004H175.5C175.5 77.0004 175.5 77.0004 175.4 77.0004C173.1 77.2004 170.9 77.5004 168.6 77.8004C158.6 79.0004 149.2 80.1004 142.3 79.0004C141.6 78.8004 141.1 78.5004 140.7 78.1004C151.6 75.5004 161.2 65.7004 162.3 61.1004C162.7 59.7004 162.2 58.9004 161.8 58.6004C159 56.3004 153.1 60.5004 150.6 62.5004C150.6 61.3004 150.2 60.4004 149.4 60.0004C146.3 58.3004 138.6 63.4004 136 66.0004C135.4 66.5004 134.7 67.4004 134.2 68.7004C134 69.0004 133.9 69.4004 133.8 69.7004C126.6 61.7004 116.8 56.4004 106.2 54.5004C106.3 54.1004 106.5 53.8004 106.6 53.4004C106.9 52.5004 107.3 51.7004 107.5 50.9004C107.6 50.5004 107.4 50.1004 107.1 50.0004C106.6 49.8004 106 50.2004 105.3 51.1004C105.5 50.1004 105.7 49.1004 105.7 48.3004C105.7 48.2004 105.7 48.1004 105.6 47.9004C105.5 47.7004 105.4 47.6004 105.2 47.5004C105 47.4004 104.8 47.4004 104.6 47.5004C103.7 47.9004 102.3 50.7004 101.3 53.8004C101.1 53.8004 100.9 53.8004 100.6 53.8004H100.5C98.5001 53.7004 96.5001 53.7004 94.4001 53.9004C93.9001 50.5004 93.0001 47.3004 92.2001 46.7004C92.0001 46.6004 91.7001 46.5004 91.5001 46.7004C91.3001 46.8004 91.0001 47.1004 91.0001 47.4004C91.0001 48.6004 91.0001 49.7004 90.9001 50.9004C90.4001 50.0004 89.8001 49.2004 89.1001 49.4004C88.8001 49.5004 88.5001 49.9004 88.6001 50.3004C88.8001 51.0004 88.9001 51.7004 89.0001 52.4004C88.7001 52.1004 88.3001 52.0004 88.0001 52.1004C87.7001 52.2004 87.5001 52.6004 87.6001 53.0004C87.8001 53.6004 87.9001 54.2004 88.0001 54.8004C77.1001 57.1004 67.3001 63.1004 60.3001 71.8004C59.9001 70.9004 59.4001 69.9004 58.8001 68.8004C58.7001 68.6004 57.9001 67.3004 57.4001 66.5004C56.9001 65.6004 55.9001 65.3004 55.3001 65.6004C55.1001 65.7004 55.0001 65.7004 54.9001 65.9004C54.3001 65.6004 53.6001 65.7004 53.1001 66.0004C52.9001 66.1004 52.8001 66.2004 52.7001 66.4004C52.1001 66.2004 51.5001 66.3004 51.1001 66.5004C50.9001 66.6004 50.8001 66.8004 50.7001 67.0004C50.3001 66.9004 49.9001 67.0004 49.5001 67.2004C49.3001 67.4004 49.1001 67.6004 49.0001 67.9004C48.4001 67.8004 47.9001 68.0004 47.6001 68.4004C47.4001 68.6004 47.0001 69.5004 48.3001 70.7004C48.4001 70.8004 48.7001 71.0004 49.0001 71.3004C50.1001 72.2004 52.1001 73.9004 53.3001 75.9004C54.1001 77.1004 54.4001 78.6004 54.2001 80.0004C54.2001 80.2004 54.0001 80.4004 53.8001 80.5004C53.4001 80.8004 52.8001 80.8004 52.1001 80.7004C51.1001 80.4004 39.6001 77.5004 23.1001 79.1004C22.9001 79.1004 22.7001 79.3004 22.7001 79.5004C22.6001 79.8004 22.6001 80.1004 22.5001 80.4004C20.7001 80.4004 19.0001 79.8004 17.5001 78.8004C17.2001 78.6004 16.3001 78.0004 15.7001 78.6004C15.1001 79.2004 15.8001 80.2004 16.0001 80.6004C16.1001 80.8004 16.2001 81.1004 16.2001 81.4004C15.0001 81.7004 13.7001 82.0004 12.6001 82.3004C8.30008 83.7004 8.10008 84.2004 8.20008 84.8004C8.30008 85.1004 8.50008 85.2004 8.80008 85.3004H8.70008C4.60008 87.2004 4.80008 87.9004 5.00008 88.2004C5.10008 88.4004 5.20008 88.7004 6.00008 88.7004C6.30008 88.7004 6.70008 88.7004 7.30008 88.5004C6.90008 88.9004 6.60008 89.3004 6.80008 89.7004C6.90008 90.0004 7.20008 90.1004 7.60008 90.1004C7.90008 90.1004 8.30008 90.0004 8.80008 89.9004C8.50008 90.3004 8.30008 90.7004 8.50008 91.1004C8.70008 91.4004 9.00008 91.6004 9.50008 91.6004C10.0001 91.6004 10.5001 91.5004 11.0001 91.3004C14.8001 90.0004 20.0001 89.1004 22.8001 89.1004C22.9001 89.4004 23.0001 89.7004 23.1001 90.1004C23.2001 90.3004 23.4001 90.5004 23.6001 90.4004C25.6001 90.2004 27.6001 90.2004 29.5001 90.1004C29.6001 90.1004 29.6001 90.2004 29.7001 90.2004C29.8001 90.2004 29.8001 90.2004 29.9001 90.2004C29.9001 90.2004 29.9001 90.2004 30.0001 90.2004C36.7001 90.1004 43.3001 90.8004 49.9001 92.1004C50.1001 92.7004 50.2001 93.3004 50.4001 93.9004C50.4001 94.1004 50.5001 94.2004 50.5001 94.4004C50.2001 96.1004 50.1001 97.8004 50.0001 99.5004C49.9001 101.1 49.9001 102.6 50.0001 104.2C48.2001 107.1 46.9001 111.7 48.3001 115.6L43.7001 125.3L30.2001 116.7C30.0001 116.6 29.8001 116.6 29.7001 116.7C29.0001 117.1 28.4001 117.6 27.8001 118.1C27.7001 118 27.6001 118 27.5001 117.9C27.4001 117.8 27.3001 117.7 27.1001 117.6C27.1001 117.6 27.1001 117.5 27.0001 117.5C26.4001 117.1 25.8001 116.6 25.2001 116.2C24.8001 115.9 24.3001 115.5 23.9001 115.3C23.2001 114.8 22.4001 114.4 21.6001 114.1H21.5001C20.2001 114 19.0001 114.1 17.8001 114.4C16.3001 114.8 14.1001 114.9 12.1001 115.1C7.80008 115.5 5.50008 115.8 5.30008 116.9C5.20008 117.4 5.70008 117.8 6.40008 118.3C8.20008 119.6 12.6001 121.6 15.9001 123L17.6001 123.8C19.2001 124.5 20.8001 125.2 22.3001 126.1C22.1001 126.7 21.8001 127.4 21.6001 128.1C21.5001 128.3 21.6001 128.5 21.8001 128.7L39.4001 140.8C40.6001 141.7 42.0001 142.2 43.5001 142.5C44.1001 142.6 44.8001 142.7 45.4001 142.7C47.0001 142.7 48.6001 142.3 50.1001 141.6C52.2001 140.6 53.8001 139 54.9001 137L58.7001 129.7C62.3001 134.8 66.7001 139 71.8001 142.4C71.8001 142.6 71.9001 142.8 72.0001 142.9C72.5001 143.2 73.0001 143.5 73.4001 143.8C73.2001 144.4 72.9001 145.1 72.7001 145.7C72.5001 146.3 72.2001 146.9 72.1001 147.4C71.8001 148.2 71.6001 149.1 71.6001 150V150.1C71.8001 151.3 72.3001 152.5 72.9001 153.6C73.6001 155 74.4001 157 75.1001 158.9C76.6001 162.9 77.5001 165 78.6001 165C78.6001 165 78.6001 165 78.7001 165C79.1001 165 79.5001 164.6 79.8001 163.6C80.5001 161.6 81.2001 157.2 81.7001 153.7C81.8001 152.9 82.0001 152.1 82.1001 151.4C82.1001 151.4 82.1001 151.4 82.1001 151.3C82.3001 150.1 82.5001 148.9 82.7001 147.6C87.7001 149.3 93.0001 150.1 98.3001 150.1C100.1 150.1 101.8 150 103.6 149.8L103.1 151.7C103 151.9 103.1 152.1 103.2 152.2C103.5 152.5 103.8 152.7 104.2 153C103.5 156.9 102.4 160.7 100.9 164.3C98.3001 170.1 98.4001 171 98.8001 171.5C99.0001 171.8 99.3001 171.9 99.7001 171.9C99.7001 171.9 99.7001 171.9 99.8001 171.9C100.9 171.9 102.4 170.5 104.6 168.2C106.2 166.6 108 164.7 109.5 163.9C110.4 163.4 111.3 162.8 111.9 162C112.6 161.1 112.8 160.2 113 159.1C113.2 158.2 113.3 157.1 113.9 155.7C114.7 155.6 115.5 155.5 116.2 155.4C116.4 155.4 116.5 155.2 116.6 155L119.3 145.2C129.5 140.2 137.6 131.9 142.3 121.5L149.5 132.5C150.1 133.5 151 134.3 151.9 134.9C152.9 135.5 154 135.9 155.1 136C156.2 136.1 157.4 136 158.5 135.7C159.6 135.4 160.6 134.8 161.5 134L180.6 116.6C180.7 116.5 180.8 116.3 180.8 116.1C180.6 115.4 180.4 114.7 180.1 114C183.1 111.4 186.3 109 189.6 106.8C194.7 103.3 195.1 102.5 195 101.9ZM156.5 120.2C156.6 121.3 156.7 122.3 156.7 123.4C156.7 123.6 156.8 123.8 157.1 123.9H157.2C157.4 123.9 157.5 123.8 157.6 123.7L162.8 115.4L171.8 107C173 107.5 174.1 108.3 175.1 109.2L157.7 125C157.4 125.2 157.1 125.4 156.8 125.5C156.5 125.6 156.1 125.6 155.8 125.5C155.5 125.4 155.2 125.2 154.9 125C154.7 124.8 154.5 124.5 154.4 124.1C151.3 112.8 149.1 105.9 141.9 100.6C142.5 100.3 143.1 100 143.7 99.7004C153.9 103.8 156.5 120 156.5 120.2ZM145.2 99.1004C144.9 99.0004 144.6 98.8004 144.3 98.7004C144.3 97.6004 144.5 96.5004 144.8 95.3004C145 96.6004 145.1 97.9004 145.2 99.1004ZM188.7 85.8004C188.1 85.9004 187.5 86.0004 186.9 86.1004L185.7 86.3004C185 86.4004 184.3 86.5004 183.6 86.6004C183.9 86.1004 184.1 85.6004 184.4 85.1004C185.9 85.4004 187.4 85.5004 188.9 85.5004C189.5 85.5004 189.8 85.5004 190.1 85.5004C189.7 85.6004 189.3 85.7004 188.7 85.8004ZM190.3 82.9004C190.9 82.9004 191.2 82.9004 191.5 82.9004C191.2 83.0004 190.8 83.2004 190.3 83.3004C188.8 83.7004 187.2 84.0004 185.6 84.2004C185.3 84.2004 185 84.1004 184.7 84.0004C184.8 83.7004 184.9 83.3004 185 83.0004C186.7 83.1004 188.5 83.1004 190.3 82.9004ZM190.8 80.2004C191.4 80.1004 191.8 80.1004 192.1 80.1004C191.9 80.2004 191.5 80.4004 190.8 80.6004C188.7 81.2004 186.2 81.9004 185.6 82.1004C185.4 82.1004 185.2 82.1004 185 82.1004C185 81.7004 185.1 81.3004 185.1 80.9004C185.2 80.9004 185.2 80.9004 185.3 80.9004C186.9 80.7004 190.5 80.3004 190.8 80.2004ZM188.8 77.8004C189.4 77.6004 189.8 77.5004 190 77.5004C189.8 77.7004 189.4 77.9004 188.8 78.2004L185.2 79.9004C185.1 79.9004 185.1 79.9004 185 79.9004C185 79.8004 185 79.6004 185 79.5004C185 79.2004 184.7 79.0004 184.5 79.1004C186 78.7004 188.8 77.9004 188.8 77.8004ZM179.9 77.3004C181.4 74.2004 182 73.9004 182 73.9004C182.2 74.1004 181.9 75.4004 181.8 76.0004C181.6 77.0004 181.4 78.0004 181.6 78.7004C181.7 78.9004 181.8 79.0004 182 79.1004C181.9 79.2004 181.9 79.2004 181.9 79.3004C181.5 80.4004 180.8 81.4004 180 82.3004C179.2 83.2004 178.2 83.8004 177.1 84.2004C176.8 84.3004 176.7 84.6004 176.8 84.8004C176.9 85.0004 177.1 85.1004 177.3 85.1004C177.4 85.1004 177.4 85.1004 177.5 85.1004C178.7 84.6004 179.8 83.9004 180.8 82.9004C181.7 82.0004 182.4 80.8004 182.9 79.6004C182.9 79.5004 182.9 79.3004 182.9 79.2004C183.2 79.2004 183.5 79.2004 183.8 79.1004C183.9 79.1004 184.2 79.0004 184.5 78.9004C184.3 79.0004 184.2 79.2004 184.2 79.4004C184.5 81.6004 184 83.9004 182.8 85.8004C182.7 86.0004 182.7 86.2004 182.8 86.4004C182.6 86.4004 182.5 86.4004 182.3 86.5004C181.5 86.6004 177.4 86.8004 177.4 86.8004L176.8 86.9004C176.4 86.9004 176.1 87.0004 175.8 87.0004C175.4 86.0004 174.9 84.3004 174.9 82.1004C174.8 80.7004 174.9 79.7004 175.1 78.9004C175.3 78.9004 175.6 78.9004 175.8 78.9004L176.8 78.8004C178 78.9004 179.3 78.7004 179.9 77.3004ZM168.8 78.6004C170.6 78.4004 172.5 78.2004 174.3 78.0004C173.8 79.2004 173.8 81.2004 173.8 82.2004C173.9 84.0004 174.2 86.8004 175.2 88.2004C166.2 89.3004 156.5 90.1004 146.1 89.7004C145.7 89.7004 145.4 89.7004 145 89.6004C144.5 89.6004 144.1 89.5004 143.6 89.5004C143.4 89.5004 143.2 89.6004 143.1 89.8004C143 90.0004 143.1 90.2004 143.2 90.4004C143.4 90.5004 143.6 90.7004 144 90.9004C144.3 91.1004 144.6 91.3004 145 91.5004C145 91.6004 144.9 91.7004 144.9 91.8004C144.8 92.1004 144.7 92.5004 144.5 92.8004C144.4 92.9004 144.4 93.0004 144.4 93.0004C143.7 94.9004 143.1 96.9004 143.2 98.7004C140 100.5 135.3 102 132.3 101.2C130 96.2004 128.8 92.4004 128.6 89.6004C128.6 89.3004 128.6 89.0004 128.6 88.7004C128.6 87.5004 128.9 86.3004 129.4 85.2004C129.5 85.0004 129.4 84.7004 129.2 84.6004C129 84.5004 128.7 84.5004 128.5 84.7004L126.7 87.3004L101.3 71.8004C101.4 71.3004 101.5 70.9004 101.6 70.4004C101.7 70.3004 101.7 70.2004 101.7 70.2004C102.1 69.1004 102.6 68.0004 103.2 66.9004C104.2 65.4004 105.4 64.1004 106.9 63.1004C109.8 64.8004 114.1 67.5004 118.3 70.2004C126.9 75.6004 131.5 78.5004 133.2 79.2004C132.9 83.4004 133.3 87.6004 134.5 91.7004C134.6 91.9004 134.7 92.1004 135 92.1004C135.2 92.1004 135.4 92.0004 135.5 91.8004C137.3 87.5004 139.6 83.5004 142.5 79.9004C149.5 80.9004 158.9 79.8004 168.8 78.6004ZM137.5 66.2004C138.5 66.4004 139.3 68.4004 139.2 69.8004C139.2 70.3004 139.4 70.6004 139.6 70.7004C140 70.9004 140.5 70.7004 140.9 70.4004C141.1 70.3004 141.3 70.2004 141.4 70.3004C141.5 70.4004 141.6 70.5004 141.6 70.7004C141.6 71.1004 141.2 71.7004 140.2 72.2004C140.1 72.2004 140.1 72.3004 140 72.3004C139.8 72.6004 139.6 72.9004 139.5 73.2004C139.1 75.0004 138.8 76.9004 139.7 78.3004C140.1 78.9004 140.7 79.4004 141.5 79.7004C139 82.9004 136.9 86.4004 135.2 90.1004C134.4 86.6004 134.1 83.0004 134.3 79.3004C135 79.1004 135.8 78.5004 136.3 77.3004L138.2 75.5004C138.4 75.3004 138.4 75.1004 138.3 74.9004C138.2 74.7004 138 74.6004 137.7 74.7004C137.2 74.8004 136.7 74.9004 136.2 74.9004C135.3 74.9004 134.7 74.7004 134.4 74.2004C134 73.6004 133.8 72.1004 135.2 68.9004C135.9 67.0004 136.8 66.0004 137.5 66.2004ZM133.4 70.4004C132.8 72.3004 132.8 73.7004 133.4 74.6004C133.8 75.3004 134.6 75.7004 135.5 75.8004C135.4 76.1004 135.4 76.5004 135.2 76.8004C134.8 77.9004 134.2 78.3004 133.7 78.4004C132.7 78.2004 125 73.4004 118.8 69.5004C114.5 66.8004 110 63.9004 107.1 62.3004C106.9 62.2004 106.7 62.2004 106.6 62.3004C106.4 62.5004 106.1 62.6004 105.9 62.8004L105.8 62.7004C104.4 60.6004 105.1 58.2004 105.6 56.2004L105.7 55.8004C105.7 55.6004 105.8 55.4004 105.9 55.2004C116.5 56.9004 126.2 62.3004 133.4 70.4004ZM105.7 51.9004C105.9 51.6004 106 51.4004 106.2 51.2004C106 51.7004 105.8 52.2004 105.6 52.7004C105.2 53.7004 104.8 54.7004 104.7 55.4004L104.6 55.8004C104.5 56.2004 104.4 56.7004 104.3 57.2004C104.3 56.0004 104.5 54.7004 104.8 53.5004C105.1 53.0004 105.4 52.6004 105.6 52.2004L105.7 51.9004ZM104.6 48.8004C104.5 49.6004 104.3 50.5004 104.1 51.4004C103.3 55.5004 102.3 60.5004 105.1 63.3004C104.1 64.2004 103.1 65.3004 102.4 66.4004C101.8 67.3004 101.3 68.3004 100.9 69.4004C99.2001 68.1004 98.2001 66.9004 98.2001 65.9004C98.4001 62.0004 98.4001 59.9004 98.4001 58.2004V57.4004C98.4001 57.2004 98.4001 57.1004 98.5001 57.0004C98.7001 57.1004 99.0001 57.5004 99.2001 58.5004C99.8001 60.5004 100.5 63.4004 100.5 63.4004C100.6 63.7004 100.8 63.8004 101.1 63.8004C101.4 63.7004 101.5 63.5004 101.5 63.2004C101.5 63.2004 101.2 61.9004 100.8 60.5004C100.9 56.7004 103.3 50.7004 104.6 48.8004ZM92.0001 47.9004C92.5001 49.1004 93.1001 51.6004 93.5001 54.2004C93.8001 56.1004 93.9001 58.0004 93.8001 59.6004C93.3001 61.0004 92.9001 62.3004 92.9001 62.3004C92.8001 62.6004 92.9001 62.8004 93.2001 62.9004C93.5001 63.0004 93.7001 62.9004 93.8001 62.6004C93.8001 62.6004 94.2001 61.4004 94.7001 59.9004V59.8004C94.9001 59.1004 95.1001 58.4004 95.3001 57.8004C95.5001 57.0004 95.8001 56.5004 95.9001 56.4004C95.9001 56.5004 96.0001 56.6004 96.0001 56.9004C96.5001 60.3004 96.0001 63.7004 94.6001 66.8004C94.0001 67.8004 93.2001 68.6004 92.1001 69.2004C91.6001 68.1004 90.7001 67.0004 89.9001 66.1004C89.2001 65.3004 88.2001 64.2004 87.3001 63.5004C87.4001 63.4004 87.5001 63.3004 87.6001 63.2004C87.6001 63.2004 87.6001 63.2004 87.7001 63.1004C91.5001 59.6004 92.0001 53.5004 92.0001 47.9004ZM91.7001 70.4004C91.1001 71.0004 90.1001 71.8004 88.8001 72.9004C87.3001 70.2004 85.2001 67.9004 82.7001 66.1004C83.7001 65.3004 84.7001 64.4004 85.7001 63.6004C85.8001 63.6004 86.0001 63.7004 86.2001 63.8004C86.2001 63.8004 86.2001 63.8004 86.3001 63.8004C87.0001 64.2004 88.1001 65.3004 89.3001 66.7004C90.3001 67.8004 91.1001 69.1004 91.5001 69.8004C91.5001 69.9004 91.5001 69.9004 91.5001 70.0004C91.5001 70.1004 91.6001 70.1004 91.6001 70.1004C91.7001 70.3004 91.7001 70.4004 91.7001 70.4004ZM90.2001 51.5004L90.8001 52.7004C90.7001 53.4004 90.6001 54.2004 90.5001 54.9004C90.5001 54.8004 90.5001 54.7004 90.5001 54.6004C90.6001 54.5004 90.6001 54.3004 90.5001 54.2004C90.5001 54.2004 90.5001 54.1004 90.4001 54.1004C90.2001 53.0004 90.1001 51.9004 89.8001 50.8004C90.0001 51.0004 90.1001 51.2004 90.2001 51.5004ZM89.5001 54.3004C89.6001 54.7004 89.6001 55.2004 89.7001 55.6004C89.7001 56.1004 89.6001 56.6004 89.6001 57.1004C89.5001 55.9004 89.3001 54.6004 89.0001 53.4004C89.1001 53.7004 89.2001 54.0004 89.5001 54.3004ZM88.3001 55.5004C88.4001 56.2004 88.5001 56.9004 88.6001 57.5004C88.6001 58.7004 87.6001 61.2004 86.5001 62.8004C86.1001 62.6004 85.7001 62.6004 85.4001 62.7004C85.4001 62.7004 85.3001 62.7004 85.3001 62.8004C78.3001 68.7004 70.8001 74.0004 63.0001 78.6004C62.8001 78.7004 62.7001 78.8004 62.5001 78.9004C62.3001 79.0004 62.2001 79.1004 61.9001 79.2004C61.6001 79.4004 61.3001 79.6004 60.9001 79.5004C60.6001 79.5004 60.2001 79.4004 60.0001 79.2004C59.6001 78.7004 59.4001 78.1004 59.3001 77.5004C60.3001 77.4004 61.0001 77.0004 61.3001 76.3004C61.7001 75.5004 61.6001 74.3004 61.0001 72.5004C67.7001 63.8004 77.4001 57.8004 88.3001 55.5004ZM54.3001 81.1004C54.8001 80.8004 55.1001 80.4004 55.2001 79.9004C55.5001 78.3004 55.1001 76.6004 54.2001 75.2004C54.2001 75.1004 54.2001 75.0004 54.2001 74.9004C54.2001 74.8004 54.2001 74.8004 54.2001 74.7004C54.2001 74.5004 54.2001 74.2004 54.1001 74.0004C54.0001 73.5004 53.7001 73.1004 53.3001 72.8004C52.8001 72.4004 52.7001 72.1004 52.7001 71.9004C52.7001 71.9004 52.7001 71.8004 52.8001 71.8004C52.8001 71.8004 53.0001 71.8004 53.2001 72.0004C53.6001 72.4004 54.0001 72.5004 54.3001 72.3004C54.4001 72.2004 54.5001 72.1004 54.5001 72.0004C54.6001 71.7004 54.5001 71.2004 54.4001 70.8004C54.5001 70.8004 54.5001 70.8004 54.6001 70.8004C54.8001 70.7004 55.1001 70.6004 55.2001 70.4004L55.3001 70.3004H55.4001C55.6001 70.3004 55.9001 70.3004 56.1001 70.3004C56.3001 70.2004 56.5001 70.2004 56.7001 70.0004L56.8001 69.9004C56.9001 69.9004 57.0001 70.0004 57.0001 70.0004C57.1001 70.0004 57.3001 70.0004 57.4001 70.0004C57.6001 70.0004 57.8001 69.9004 58.0001 69.8004C58.1001 69.8004 58.2001 69.7004 58.2001 69.6004C58.8001 70.7004 59.3001 71.7004 59.6001 72.5004C60.2001 74.0004 60.4001 75.1004 60.1001 75.6004C59.9001 76.0004 59.3001 76.2004 58.4001 76.3004C57.8001 76.3004 57.1001 76.3004 56.5001 76.2004C56.3001 76.2004 56.1001 76.3004 56.0001 76.5004C55.9001 76.7004 56.0001 77.0004 56.2001 77.1004L58.4001 78.6004C58.6001 79.0004 58.8001 79.3004 59.0001 79.6004C59.0001 79.6004 59.0001 79.7004 59.1001 79.7004C59.6001 80.1004 60.1001 80.3004 60.7001 80.3004C61.3001 80.3004 61.9001 80.1004 62.3001 79.8004C62.4001 79.7004 62.5001 79.7004 62.6001 79.6004C62.7001 81.0004 62.5001 83.9004 60.0001 84.7004C57.4001 85.6004 54.5001 83.8004 52.8001 81.2004C53.5001 81.5004 53.9001 81.4004 54.3001 81.1004ZM9.20008 85.9004C10.7001 85.2004 12.3001 84.7004 13.9001 84.3004C13.8001 84.5004 13.6001 84.6004 13.5001 84.8004C13.4001 84.9004 13.4001 85.0004 13.3001 85.2004C12.4001 85.5004 11.5001 85.8004 10.6001 86.2004C8.30008 87.0004 7.10008 87.3004 6.50008 87.3004C6.90008 87.1004 7.70008 86.6004 9.20008 85.9004ZM8.20008 88.8004C8.30008 88.7004 8.40008 88.7004 8.50008 88.6004C9.80008 87.7004 11.2001 87.0004 12.6001 86.5004C12.5001 86.8004 12.4001 87.0004 12.3001 87.3004C11.9001 87.5004 11.6001 87.7004 11.3001 87.9004C10.5001 88.2004 9.60008 88.4004 8.70008 88.7004C8.50008 88.7004 8.30008 88.7004 8.20008 88.8004ZM10.6001 90.1004C10.1001 90.3004 9.80008 90.3004 9.60008 90.3004C9.70008 90.2004 9.90008 89.9004 10.3001 89.7004C10.8001 89.3004 11.4001 89.0004 11.9001 88.7004C11.9001 88.8004 11.9001 88.8004 11.9001 88.9004C11.9001 89.2004 12.0001 89.4004 12.3001 89.5004H12.4001C12.6001 89.5004 12.8001 89.3004 12.9001 89.1004C13.1001 87.8004 13.6001 86.6004 14.3001 85.6004C14.7001 85.0004 15.2001 84.5004 15.7001 84.0004C15.9001 83.8004 15.9001 83.5004 15.7001 83.3004C15.5001 83.1004 15.3001 83.1004 15.1001 83.2004C14.1001 83.4004 13.2001 83.7004 12.2001 83.9004H12.1001C11.4001 83.9004 10.6001 84.0004 10.0001 84.0004C10.5001 83.8004 11.5001 83.4004 13.0001 82.9004C14.0001 82.6004 15.2001 82.3004 16.3001 82.1004C16.3001 82.5004 16.4001 82.8004 16.6001 83.1004C16.8001 83.6004 17.1001 84.1004 17.6001 84.5004C18.0001 84.9004 18.5001 85.2004 19.0001 85.4004C19.5001 85.6004 19.9001 85.7004 20.4001 85.7004C20.5001 85.7004 20.6001 85.7004 20.6001 85.7004C20.9001 85.7004 21.1001 85.4004 21.1001 85.2004C21.1001 84.9004 20.8001 84.7004 20.6001 84.7004C20.2001 84.7004 19.7001 84.7004 19.3001 84.5004C18.9001 84.4004 18.5001 84.1004 18.2001 83.8004C17.9001 83.5004 17.6001 83.1004 17.5001 82.7004C17.3001 82.3004 17.3001 81.9004 17.3001 81.4004C17.4001 80.8004 17.3001 80.2004 17.0001 79.7004C16.8001 79.4004 16.7001 79.2004 16.7001 79.1004C16.8001 79.1004 16.9001 79.2004 17.1001 79.3004C18.7001 80.4004 20.5001 81.0004 22.5001 81.0004C22.1001 83.2004 22.2001 85.5004 22.7001 87.7004C19.6001 87.8004 14.4001 88.8004 10.6001 90.1004ZM23.6001 88.3004C23.6001 88.2004 23.6001 88.2004 23.5001 88.1004C22.8001 85.4004 22.8001 82.5004 23.5001 79.8004C25.2001 79.6004 26.9001 79.5004 28.5001 79.5004C27.8001 82.6004 27.9001 85.8004 28.9001 88.9004C27.2001 88.9004 25.5001 89.0004 23.8001 89.1004C23.8001 88.8004 23.7001 88.6004 23.6001 88.3004ZM30.0001 88.8004C29.0001 85.8004 28.8001 82.5004 29.6001 79.4004C41.9001 79.0004 50.5001 81.0004 51.7001 81.3004C53.2001 83.9004 56.0001 86.2004 58.8001 86.2004C59.4001 86.2004 60.0001 86.1004 60.6001 85.9004C64.0001 84.7004 63.9001 80.5004 63.8001 79.3004C70.2001 75.6004 76.3001 71.4004 82.1001 66.8004C84.6001 68.6004 86.7001 70.9004 88.2001 73.6004C83.7001 77.3004 76.7001 82.9004 70.4001 86.4004L69.0001 84.9004C68.9001 84.7004 68.6001 84.7004 68.4001 84.8004C68.2001 84.9004 68.1001 85.1004 68.1001 85.4004C68.3001 86.2004 68.4001 87.0004 68.5001 87.8004C68.8001 91.9004 68.1001 96.5004 67.3001 101L67.2001 101.4C62.9001 102.5 58.6001 102.6 52.7001 101.8C52.5001 99.1004 52.0001 96.4004 51.3001 93.7004L52.5001 92.1004C52.6001 92.0004 52.6001 91.8004 52.6001 91.6004C52.5001 91.4004 52.4001 91.3004 52.2001 91.3004L51.6001 91.2004C51.1001 91.1004 50.7001 91.0004 50.3001 90.9004C43.6001 89.4004 36.8001 88.8004 30.0001 88.8004ZM51.7001 101.8C51.4001 102 51.1001 102.3 50.8001 102.6C50.8001 101.5 50.8001 100.4 50.9001 99.3004C50.9001 98.6004 51.0001 97.8004 51.1001 97.1004C51.3001 98.7004 51.6001 100.2 51.7001 101.8ZM50.7001 104.4C51.1001 103.7 51.6001 103.1 52.2001 102.6C58.2001 103.5 62.6001 103.4 67.0001 102.3C66.9001 103.2 66.7001 104.1 66.5001 104.9C65.7001 104.9 64.9001 104.9 64.1001 105V106C65.0001 106 65.9001 105.9 66.9001 105.9H67.0001C72.7001 105.8 78.5001 105.9 84.1001 106.4C85.4001 106.5 86.6001 106.9 87.7001 107.5C88.8001 108.1 89.8001 109 90.5001 110C91.2001 111 91.8001 112.2 92.0001 113.5C92.2001 114.8 92.2001 116.1 91.9001 117.3C90.3001 124.3 88.3001 131.2 86.1001 138.1C83.9001 138.5 81.8001 138.5 79.6001 138C77.4001 137.5 75.4001 136.7 73.6001 135.4C74.4001 131 75.3001 126.6 76.4001 122.3C81.3001 121.7 84.9001 120.9 85.0001 120.9C85.3001 120.8 85.4001 120.6 85.4001 120.3C85.4001 120 85.1001 119.9 84.8001 119.9C84.8001 119.9 81.0001 120.7 76.0001 121.3C67.4001 122.3 60.6001 122.3 56.2001 121C55.0001 120.7 53.9001 120.2 53.0001 119.6C51.2001 118.5 49.9001 117 49.2001 115.1V115C47.8001 111.5 49.0001 107 50.7001 104.4ZM81.7001 146.5C81.6001 146.7 81.6001 146.7 81.6001 146.8C81.4001 147.9 81.2001 149 81.0001 150.1C80.8001 150 80.6001 149.8 80.4001 149.7C80.0001 149.4 79.6001 149.1 79.2001 148.8C79.0001 148.6 78.8001 148.5 78.6001 148.3C77.2001 147.1 75.9001 145.7 74.7001 144.2C76.9001 145.1 79.2001 145.6 81.6001 145.6C81.7001 145.6 81.8001 145.6 81.9001 145.6C81.9001 145.9 81.8001 146.2 81.7001 146.5ZM74.3001 142.9C74.2001 142.8 74.2001 142.8 74.1001 142.8C74.1001 142.8 74.1001 142.8 74.0001 142.8C73.6001 142.6 73.1001 142.3 72.7001 142.1C72.7001 142 72.7001 141.9 72.7001 141.8C72.9001 140.1 73.2001 138.3 73.5001 136.6C75.3001 137.8 77.3001 138.7 79.5001 139.1C80.7001 139.4 81.9001 139.5 83.1001 139.5C84.0001 139.5 84.9001 139.4 85.8001 139.3C85.2001 141 84.6001 142.8 84.0001 144.5C80.7001 144.9 77.3001 144.4 74.3001 142.9ZM12.0001 115.8C14.1001 115.6 16.3001 115.4 17.9001 115C19.0001 114.7 20.1001 114.6 21.3001 114.7C21.4001 114.7 21.6001 114.8 21.7001 114.8C21.0001 114.9 20.3001 115 19.6001 115.1C17.9001 115.5 15.5001 115.7 13.1001 115.9C11.7001 116 10.5001 116.1 9.30008 116.3C9.00008 116.3 8.80009 116.4 8.60009 116.4H8.50008C8.30008 116.4 8.10008 116.5 7.90008 116.5C7.80008 116.5 7.70008 116.5 7.70008 116.5C7.60008 116.5 7.40008 116.6 7.30008 116.6C7.20008 116.6 7.10008 116.7 7.00008 116.7C6.90008 116.7 6.80008 116.8 6.70008 116.8H6.60008C6.40008 116.7 6.30008 116.6 6.20008 116.5C6.70008 116.3 9.90008 116 12.0001 115.8ZM18.5001 123C18.8001 122.8 19.0001 122.5 19.3001 122.3C19.6001 122.1 19.8001 121.9 20.1001 121.7C20.5001 121.4 20.9001 121.1 21.4001 120.9C21.7001 120.7 21.9001 120.5 22.2001 120.4C22.6001 120.2 23.0001 120 23.4001 119.7C24.4001 119.2 25.4001 118.7 26.5001 118.3C26.6001 118.4 26.7001 118.4 26.7001 118.5C26.7001 118.5 26.8001 118.5 26.8001 118.6C24.9001 120.3 23.6001 122.4 22.5001 125.1C21.2001 124.2 19.9001 123.5 18.5001 123ZM29.8001 117.4L34.0001 120.1C30.8001 122.4 28.6001 126 27.1001 130.9L22.5001 127.7C24.1001 122.7 26.2001 119.8 29.8001 117.4ZM53.8001 136.2C52.8001 138 51.3001 139.5 49.5001 140.4C47.6001 141.3 45.6001 141.6 43.5001 141.2C42.1001 141 40.9001 140.4 39.8001 139.7L28.0001 131.5C29.5001 126.5 31.7001 122.9 34.9001 120.7L43.5001 126.2C43.6001 126.3 43.8001 126.3 43.9001 126.3C44.0001 126.3 44.2001 126.2 44.2001 126L48.6001 116.6C49.4001 118.3 50.7001 119.6 52.4001 120.7L59.2001 125.9L58.0001 128.2L53.8001 136.2ZM59.1001 128.4L61.9001 123.1C65.6001 123.3 70.2001 123.2 75.5001 122.6C74.0001 128.7 72.8001 134.9 71.9001 141.1C66.8001 137.6 62.5001 133.4 59.1001 128.4ZM78.3001 163.7C77.7001 163.2 76.6001 160.3 75.8001 158.3C75.1001 156.3 74.3001 154.3 73.5001 152.9C73.0001 151.9 72.6001 150.8 72.3001 149.7C72.3001 149.5 72.3001 149.4 72.3001 149.2C72.3001 149.2 72.3001 149.2 72.3001 149.3C72.4001 149.6 72.5001 149.9 72.6001 150.2V150.3C72.7001 150.6 72.9001 151 73.1001 151.3C73.9001 152.9 74.8001 155.1 75.6001 157.3C76.3001 159.2 77.0001 161 77.6001 162.2C77.6001 162.2 77.6001 162.3 77.7001 162.3C77.8001 162.4 77.8001 162.6 77.9001 162.7C77.9001 162.8 78.0001 162.9 78.0001 162.9C78.1001 163 78.1001 163.1 78.2001 163.1L78.3001 163.2C78.5001 163.5 78.4001 163.6 78.3001 163.7ZM82.8001 146.4C82.9001 146.1 82.9001 145.8 83.0001 145.6C83.5001 145.6 84.1001 145.5 84.6001 145.4C84.8001 145.4 84.9001 145.2 85.0001 145.1C85.7001 143.1 86.4001 141 87.1001 139C87.2001 138.9 87.2001 138.8 87.2001 138.7C89.5001 131.8 91.4001 124.8 93.1001 117.7C93.4001 116.3 93.5001 114.9 93.2001 113.5C92.9001 112.1 92.4001 110.8 91.5001 109.6C90.7001 108.4 89.6001 107.5 88.3001 106.8C87.1001 106.1 85.7001 105.7 84.2001 105.6C78.7001 105.2 73.1001 105 67.5001 105.1C67.7001 104.1 67.9001 103.1 68.0001 102.1C68.0001 102.1 68.0001 102 68.1001 102L68.2001 101.2C68.9001 96.8004 69.7001 92.3004 69.4001 88.1004C69.7001 87.9004 70.0001 87.8004 70.3001 87.6004C70.3001 87.6004 70.3001 87.6004 70.4001 87.6004C79.2001 82.7004 89.4001 74.0004 92.4001 71.3004C92.7001 71.0004 92.7001 70.7004 92.6001 70.2004C93.9001 69.6004 94.9001 68.6004 95.6001 67.3004C97.1001 64.0004 97.6001 60.4004 97.1001 56.8004C96.9001 55.7004 96.4001 55.4004 96.1001 55.4004C95.6001 55.4004 95.2001 55.8004 94.8001 56.7004C94.8001 56.1004 94.7001 55.4004 94.6001 54.7004C96.6001 54.6004 98.5001 54.5004 100.5 54.6004H100.6C100.7 54.6004 100.9 54.6004 101 54.6004C100.7 55.7004 100.4 56.8004 100.2 57.8004C99.7001 56.4004 99.1001 55.7004 98.4001 55.8004C98.2001 55.8004 97.5001 56.0004 97.5001 57.2004V58.1004C97.5001 59.8004 97.5001 61.9004 97.3001 65.8004C97.2001 67.5004 99.0001 69.2004 100.6 70.4004C100.4 70.9004 100.3 71.5004 100.2 72.0004C100.2 72.2004 100.3 72.4004 100.4 72.5004L127.5 89.0004C127.5 89.2004 127.5 89.5004 127.5 89.7004C127.7 92.6004 128.9 96.4004 131.3 101.5L115.2 118.7C112.2 121.9 110 125.8 108.8 130L103.5 148.4C96.7001 149.4 89.5001 148.6 82.8001 146.4ZM111.7 158.8C111.5 159.8 111.4 160.5 110.9 161.2C110.3 161.9 109.6 162.4 108.8 162.8C107.2 163.7 105.4 165.5 103.6 167.3C102 168.9 100.3 170.7 99.5001 170.7C99.4001 170.7 99.4001 170.7 99.4001 170.7C99.3001 170.5 99.4001 169.5 101.6 164.5C103 160.9 104.1 157.2 104.9 153.4C106.2 154.2 107.6 154.9 109.1 155.2C109.8 155.4 110.4 155.5 111.1 155.5H111.2C111.6 155.5 112 155.6 112.4 155.6C112 156.9 111.9 157.9 111.7 158.8ZM115.4 154.3C114.2 154.6 113 154.6 111.8 154.6L118.1 130.4L136.5 114.4L137.3 118C136.4 118.8 134.7 120.3 130.4 124L121.6 131.7C121.5 131.8 121.5 131.8 121.4 131.9L115.4 154.3ZM119.4 143.8L122.6 132.3L131.3 124.7C138.6 118.3 138.6 118.3 139.3 117.7L139.5 117.6L141.4 120.5C137 130.6 129.2 138.8 119.4 143.8ZM160.6 133.2C159.9 133.9 159 134.4 158 134.7C157 135 156 135.1 155 135C154 134.9 153 134.5 152.2 134C151.4 133.5 150.6 132.8 150.1 131.9L142.4 120.2C142.4 120.1 142.3 120.1 142.3 120L140 116.5L137.2 112.2C137.1 112 136.8 111.9 136.6 112C136.4 112.1 136.3 112.3 136.3 112.6L136.5 113.3L117.6 129.8C117.5 129.9 117.5 130 117.4 130.1L111 154.7C110.5 154.6 110 154.5 109.4 154.4C107.8 154 106.3 153.3 104.9 152.3C104.9 152.3 104.8 152.3 104.8 152.2C104.5 152 104.2 151.8 103.9 151.6L104.5 149.3V149.2L109.8 130.5C110.9 126.4 113.1 122.7 116 119.6L132.1 102.3C132.7 102.4 133.4 102.5 134 102.5C136.1 102.5 138.6 101.9 140.8 101C148.1 106.2 150.2 112.6 153.4 124.3C153.5 124.8 153.8 125.2 154.2 125.6C154.6 126 155 126.2 155.5 126.4C155.8 126.5 156.1 126.5 156.3 126.5C156.5 126.5 156.7 126.5 157 126.4C157.5 126.3 158 126 158.3 125.7L175.9 109.7C176.2 110 176.4 110.2 176.7 110.5C178 112.1 179 113.9 179.5 115.9L160.6 133.2ZM188.8 106C185.6 108.2 182.4 110.5 179.4 113C178.9 111.9 178.2 110.9 177.4 109.9C177.1 109.5 176.7 109.1 176.3 108.8V108.7L176.2 108.6C175.8 108.2 175.3 107.8 174.8 107.5C175.9 106.7 176.6 105.9 177.2 105.2C177.9 104.5 178.3 103.9 179.1 103.7C180 103.5 180.9 103.4 181.8 103.5C183.6 103.7 186.1 103.1 188.5 102.5C190.7 102 193.2 101.4 193.8 101.9L193.9 102C194 102.1 193.4 103 188.8 106Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M35.7001 61.9004C36.2001 62.3004 36.7001 62.5004 37.4001 62.6004C37.5001 62.6004 37.6001 62.6004 37.7001 62.6004C38.2001 62.6004 38.7001 62.5004 39.1001 62.3004C39.6001 62.0004 40.1001 61.6004 40.4001 61.0004C40.7001 60.5004 40.8001 59.9004 40.8001 59.2004C40.7001 58.4004 40.3001 57.6004 39.7001 57.1004C39.1001 56.6004 38.3001 56.3004 37.4001 56.4004C36.8001 56.5004 36.2001 56.7004 35.7001 57.1004C35.2001 57.5004 34.9001 58.0004 34.7001 58.6004C34.5001 59.2004 34.5001 59.8004 34.7001 60.4004C34.9001 61.0004 35.3001 61.5004 35.7001 61.9004ZM35.7001 58.9004C35.8001 58.5004 36.1001 58.2004 36.4001 57.9004C36.7001 57.6004 37.1001 57.5004 37.5001 57.4004C37.6001 57.4004 37.6001 57.4004 37.7001 57.4004C38.2001 57.4004 38.7001 57.6004 39.1001 57.9004C39.5001 58.3004 39.8001 58.8004 39.8001 59.3004C39.8001 59.7004 39.7001 60.1004 39.5001 60.5004C39.3001 60.9004 39.0001 61.2004 38.6001 61.4004C38.2001 61.6004 37.8001 61.7004 37.4001 61.6004C37.0001 61.6004 36.6001 61.4004 36.3001 61.1004C36.0001 60.8004 35.8001 60.5004 35.6001 60.1004C35.6001 59.7004 35.6001 59.3004 35.7001 58.9004Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M144 148.9H140.4V145.3C140.4 145 140.2 144.8 139.9 144.8C139.6 144.8 139.4 145 139.4 145.3V148.9H135.8C135.5 148.9 135.3 149.1 135.3 149.4C135.3 149.7 135.5 149.9 135.8 149.9H139.4V153.5C139.4 153.8 139.6 154 139.9 154C140.2 154 140.4 153.8 140.4 153.5V149.9H144C144.3 149.9 144.5 149.7 144.5 149.4C144.5 149.1 144.2 148.9 144 148.9Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M55.6001 110C57.2001 109.7 58.5001 109.1 59.8001 108.3C61.0001 107.4 62.0001 106.3 62.8001 105C62.9001 104.8 62.9001 104.5 62.6001 104.3C62.4001 104.2 62.1001 104.2 61.9001 104.5C61.2001 105.7 60.3001 106.7 59.2001 107.4C58.1001 108.2 56.8001 108.7 55.5001 109C55.2001 109.1 55.1001 109.3 55.1001 109.6C55.2001 109.8 55.4001 110 55.6001 110Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| d="M92.2001 42.2004C93.3001 43.3004 94.8001 44.1004 96.4001 44.4004C96.9001 44.5004 97.5001 44.6004 98.0001 44.6004C99.1001 44.6004 100.1 44.4004 101.1 44.0004C102.6 43.4004 103.9 42.3004 104.8 41.0004C105.7 39.7004 106.2 38.1004 106.2 36.5004C106.2 34.9004 105.7 33.3004 104.8 32.0004C103.9 30.7004 102.6 29.6004 101.1 29.0004C100.1 28.6004 99.1001 28.4004 98.0001 28.4004C96.4001 28.4004 94.8001 28.9004 93.5001 29.8004C92.2001 30.7004 91.1001 32.0004 90.5001 33.5004C89.9001 35.0004 89.7001 36.6004 90.0001 38.2004C90.3001 39.7004 91.1001 41.1004 92.2001 42.2004ZM98.2001 32.5004C98.1001 32.6004 97.9001 32.6004 97.9001 32.5004C97.9001 32.5004 97.8001 32.4004 97.8001 32.3004C97.8001 32.2004 97.8001 32.2004 97.9001 32.1004C97.9001 32.1004 98.0001 32.0004 98.1001 32.0004C98.2001 32.0004 98.2001 32.0004 98.3001 32.1004C98.3001 32.1004 98.4001 32.2004 98.4001 32.3004C98.3001 32.4004 98.2001 32.4004 98.2001 32.5004Z" | ||
| fill="currentColor" | ||
| /> | ||
| </svg> | ||
| </SvgIcon> | ||
| ) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add accessibility attributes to improve screen reader support.
The SVG icon should include ARIA attributes for better accessibility.
Apply this diff to add accessibility attributes:
const AboutUsImage: FC<SvgIconProps> = ({ sx, ...props }) => (
- <SvgIcon sx={{ fontSize: 200, color: 'primary.dark', ...sx }} {...props}>
+ <SvgIcon
+ sx={{ fontSize: 200, color: 'primary.dark', ...sx }}
+ {...props}
+ role="img"
+ aria-label="About Us illustration"
+ >
__package_name__package update -v __package_version__Summary by CodeRabbit
New Features
EmptyChatRoomsState,ViewportHeightContainer, and various illustration components.MessagesListandChatRoomsListcomponents with search functionality and improved loading states.Bug Fixes
useJWTUserhook by removing unnecessary console logs.Documentation
Chores