diff --git a/packages/pl-fe/src/components/status.tsx b/packages/pl-fe/src/components/status.tsx index b55474668..f3a6996d5 100644 --- a/packages/pl-fe/src/components/status.tsx +++ b/packages/pl-fe/src/components/status.tsx @@ -118,6 +118,7 @@ const StatusFollowedTagInfo: React.FC = ({ status, avata } text={ @@ -342,6 +343,7 @@ const Status: React.FC = (props) => { } text={ @@ -425,6 +427,7 @@ const Status: React.FC = (props) => { } text={ @@ -453,6 +456,7 @@ const Status: React.FC = (props) => { } text={} @@ -467,6 +471,7 @@ const Status: React.FC = (props) => { } text={ diff --git a/packages/pl-fe/src/components/ui/widget.tsx b/packages/pl-fe/src/components/ui/widget.tsx index d2b18971c..44b2d7306 100644 --- a/packages/pl-fe/src/components/ui/widget.tsx +++ b/packages/pl-fe/src/components/ui/widget.tsx @@ -1,5 +1,5 @@ import clsx from 'clsx'; -import React from 'react'; +import React, { useMemo } from 'react'; import IconButton from '@/components/ui/icon-button'; @@ -26,24 +26,28 @@ const Widget: React.FC = ({ actionTitle, action, className, -}): JSX.Element => ( -
- {(title ?? action ?? onActionClick) && ( -
- {title &&

{title}

} - {action ?? - (onActionClick && ( - - ))} -
- )} -
{children}
-
-); +}): JSX.Element => { + const widgetId = useMemo(() => crypto.randomUUID(), []); + + return ( +
+ {(title ?? action ?? onActionClick) && ( +
+ {title &&

{title}

} + {action ?? + (onActionClick && ( + + ))} +
+ )} +
{children}
+
+ ); +}; export { Widget as default }; diff --git a/packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx b/packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx index 89de90775..f1eb415b0 100644 --- a/packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx @@ -1,5 +1,5 @@ import React, { useCallback } from 'react'; -import { FormattedMessage } from 'react-intl'; +import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { ChatWidgetScreens, useChatContext } from '@/contexts/chat-context'; import { useStatContext } from '@/contexts/stat-context'; @@ -18,7 +18,12 @@ import Blankslate from './blankslate'; import type { Chat } from 'pl-api'; +const messages = defineMessages({ + newChat: { id: 'chat_pane.header.new_chat', defaultMessage: 'New chat' }, +}); + const ChatPane = () => { + const intl = useIntl(); const { unreadChatsCount } = useStatContext(); const showShoutbox = !useShoutboxIsLoading(); @@ -99,6 +104,7 @@ const ChatPane = () => { } }} secondaryActionIcon={require('@phosphor-icons/core/regular/note-pencil.svg')} + secondaryActionTitle={intl.formatMessage(messages.newChat)} /> {isOpen ? renderBody() : null} diff --git a/packages/pl-fe/src/features/notifications/components/notification.tsx b/packages/pl-fe/src/features/notifications/components/notification.tsx index 4f7171189..79921f852 100644 --- a/packages/pl-fe/src/features/notifications/components/notification.tsx +++ b/packages/pl-fe/src/features/notifications/components/notification.tsx @@ -434,7 +434,7 @@ const Notification: React.FC = (props) => { /> ); } else if (icons[displayedType]) { - return ; + return ; } else { return null; } diff --git a/packages/pl-fe/src/features/status/components/detailed-status.tsx b/packages/pl-fe/src/features/status/components/detailed-status.tsx index b6f795c05..56e2f32d1 100644 --- a/packages/pl-fe/src/features/status/components/detailed-status.tsx +++ b/packages/pl-fe/src/features/status/components/detailed-status.tsx @@ -54,6 +54,7 @@ const DetailedStatus: React.FC = ({ } text={