diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/chat-pane-header.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/chat-pane-header.tsx
index 6bd1788ae..52ba08333 100644
--- a/packages/pl-fe/src/features/chats/components/chat-widget/chat-pane-header.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-widget/chat-pane-header.tsx
@@ -1,8 +1,14 @@
import React, { HTMLAttributes } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
import IconButton from '@/components/ui/icon-button';
import { useSettings } from '@/stores/settings';
+const messages = defineMessages({
+ expand: { id: 'chat_pane.header.expand', defaultMessage: 'Expand chats' },
+ collapse: { id: 'chat_pane.header.collapse', defaultMessage: 'Collapse chats' },
+});
+
interface IChatPaneHeader {
isOpen: boolean;
isToggleable?: boolean;
@@ -11,6 +17,7 @@ interface IChatPaneHeader {
unreadCount?: number;
secondaryAction?(): void;
secondaryActionIcon?: string;
+ secondaryActionTitle?: string;
}
const ChatPaneHeader = (props: IChatPaneHeader) => {
@@ -20,11 +27,13 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
onToggle,
secondaryAction,
secondaryActionIcon,
+ secondaryActionTitle,
title,
unreadCount,
...rest
} = props;
+ const intl = useIntl();
const { demetricator } = useSettings();
const ButtonComp = isToggleable ? 'button' : 'div';
@@ -54,10 +63,11 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
- {secondaryAction ? (
+ {secondaryAction && secondaryActionIcon ? (
) : null}
@@ -65,6 +75,7 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
onClick={onToggle}
src={require('@phosphor-icons/core/regular/caret-up.svg')}
className='⁂-chat-widget__header__open-button'
+ title={isOpen ? intl.formatMessage(messages.collapse) : intl.formatMessage(messages.expand)}
/>
diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx
index 817b7938f..09bf232d6 100644
--- a/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import Avatar from '@/components/ui/avatar';
import HStack from '@/components/ui/hstack';
@@ -15,19 +15,12 @@ import { useModalsActions } from '@/stores/modals';
import ChatPaneHeader from './chat-pane-header';
const messages = defineMessages({
- blockMessage: { id: 'chat_settings.block.message', defaultMessage: 'Blocking will prevent this profile from direct messaging you and viewing your content. You can unblock later.' },
- blockHeading: { id: 'chat_settings.block.heading', defaultMessage: 'Block @{acct}' },
- blockConfirm: { id: 'chat_settings.block.confirm', defaultMessage: 'Block' },
- unblockMessage: { id: 'chat_settings.unblock.message', defaultMessage: 'Unblocking will allow this profile to direct message you and view your content.' },
+ back: { id: 'card.back.label', defaultMessage: 'Back' },
unblockHeading: { id: 'chat_settings.unblock.heading', defaultMessage: 'Unblock @{acct}' },
unblockConfirm: { id: 'chat_settings.unblock.confirm', defaultMessage: 'Unblock' },
leaveMessage: { id: 'chat_settings.leave.message', defaultMessage: 'Are you sure you want to leave this chat? Messages will be deleted for you and this chat will be removed from your inbox.' },
leaveHeading: { id: 'chat_settings.leave.heading', defaultMessage: 'Leave chat' },
leaveConfirm: { id: 'chat_settings.leave.confirm', defaultMessage: 'Leave chat' },
- title: { id: 'chat_settings.title', defaultMessage: 'Chat Details' },
- blockUser: { id: 'chat_settings.options.block_user', defaultMessage: 'Block @{acct}' },
- unblockUser: { id: 'chat_settings.options.unblock_user', defaultMessage: 'Unblock @{acct}' },
- leaveChat: { id: 'chat_settings.options.leave_chat', defaultMessage: 'Leave chat' },
});
const ChatSettings = () => {
@@ -61,7 +54,7 @@ const ChatSettings = () => {
const handleUnblockUser = () => {
openModal('CONFIRM', {
heading: intl.formatMessage(messages.unblockHeading, { acct: chat?.account.acct }),
- message: intl.formatMessage(messages.unblockMessage),
+ message: ,
confirm: intl.formatMessage(messages.unblockConfirm),
onConfirm: () => unblockAccount(),
});
@@ -70,7 +63,7 @@ const ChatSettings = () => {
const handleLeaveChat = () => {
openModal('CONFIRM', {
heading: intl.formatMessage(messages.leaveHeading),
- message: intl.formatMessage(messages.leaveMessage),
+ message: ,
confirm: intl.formatMessage(messages.leaveConfirm),
onConfirm: () => deleteChat.mutate(),
});
@@ -88,7 +81,7 @@ const ChatSettings = () => {
onToggle={minimizeChatPane}
title={
-
}
@@ -113,14 +106,20 @@ const ChatSettings = () => {
-
- {intl.formatMessage(isBlocked ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}
+
+
+ {isBlocked
+ ?
+ :
+ }
+
+
{features.chatsDelete && (
-
- {intl.formatMessage(messages.leaveChat)}
+
+
)}
diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx
index 38d571ca8..9650fe7d2 100644
--- a/packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx
@@ -1,5 +1,6 @@
import { Link, type LinkProps } from '@tanstack/react-router';
import React, { useRef } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
import Avatar from '@/components/ui/avatar';
import HStack from '@/components/ui/hstack';
@@ -14,6 +15,12 @@ import Chat from '../chat';
import ChatPaneHeader from './chat-pane-header';
import ChatSettings from './chat-settings';
+const messages = defineMessages({
+ back: { id: 'card.back.label', defaultMessage: 'Back' },
+ chatInfo: { id: 'chat_pane.header.chat_info', defaultMessage: 'Chat info' },
+ newChat: { id: 'chat_pane.header.new_chat', defaultMessage: 'New chat' },
+});
+
const LinkWrapper = ({ enabled, children, ...rest }: LinkProps & { enabled: boolean; children: React.ReactNode }): JSX.Element => {
if (!enabled) {
return <>{children}>;
@@ -29,6 +36,7 @@ const LinkWrapper = ({ enabled, children, ...rest }: LinkProps & { enabled: bool
/** Floating desktop chat window. */
const ChatWindow = () => {
const { chat, currentChatId, screen, changeScreen, isOpen, toggleChatPane } = useChatContext();
+ const intl = useIntl();
const inputRef = useRef(null);
@@ -45,8 +53,6 @@ const ChatWindow = () => {
changeScreen(ChatWidgetScreens.CHAT_SETTINGS, currentChatId);
};
- const secondaryAction = () => isOpen ? openChatSettings : openSearch;
-
if (!chat) return null;
if (screen === ChatWidgetScreens.CHAT_SETTINGS) {
@@ -59,7 +65,7 @@ const ChatWindow = () => {
title={
{isOpen && (
-
+
{
}
- secondaryAction={secondaryAction()}
+ secondaryAction={isOpen ? openChatSettings : openSearch}
secondaryActionIcon={isOpen ? require('@phosphor-icons/core/regular/info.svg') : require('@phosphor-icons/core/regular/pencil-simple.svg')}
+ secondaryActionTitle={isOpen ? intl.formatMessage(messages.chatInfo) : intl.formatMessage(messages.newChat)}
isToggleable={!isOpen}
isOpen={isOpen}
onToggle={toggleChatPane}
diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/headers/chat-search-header.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
index 1f7690ddf..329b10de6 100644
--- a/packages/pl-fe/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import Icon from '@/components/ui/icon';
import Text from '@/components/ui/text';
@@ -8,7 +8,7 @@ import { ChatWidgetScreens, useChatContext } from '@/contexts/chat-context';
import ChatPaneHeader from '../chat-pane-header';
const messages = defineMessages({
- title: { id: 'chat_search.title', defaultMessage: 'Messages' },
+ back: { id: 'card.back.label', defaultMessage: 'Back' },
});
const ChatSearchHeader = () => {
@@ -25,6 +25,7 @@ const ChatSearchHeader = () => {
onClick={() => {
changeScreen(ChatWidgetScreens.INBOX);
}}
+ title={intl.formatMessage(messages.back)}
>
{
- {intl.formatMessage(messages.title)}
+
}
diff --git a/packages/pl-fe/src/features/chats/components/ui/pane.tsx b/packages/pl-fe/src/features/chats/components/ui/pane.tsx
index e358a9192..3f86c9e47 100644
--- a/packages/pl-fe/src/features/chats/components/ui/pane.tsx
+++ b/packages/pl-fe/src/features/chats/components/ui/pane.tsx
@@ -13,6 +13,7 @@ const Pane: React.FC = ({ isOpen = false, children }) => (
{children}
diff --git a/packages/pl-fe/src/locales/en.json b/packages/pl-fe/src/locales/en.json
index dc1a21665..274f52856 100644
--- a/packages/pl-fe/src/locales/en.json
+++ b/packages/pl-fe/src/locales/en.json
@@ -336,6 +336,10 @@
"chat_pane.blankslate.action": "Message someone",
"chat_pane.blankslate.body": "Search for someone to chat with.",
"chat_pane.blankslate.title": "No messages yet",
+ "chat_pane.header.chat_info": "Chat info",
+ "chat_pane.header.collapse": "Collapse chats",
+ "chat_pane.header.expand": "Expand chats",
+ "chat_pane.header.new_chat": "New chat",
"chat_search.blankslate.body": "Search for someone to chat with.",
"chat_search.blankslate.title": "Start a chat",
"chat_search.empty_results_blankslate.body": "Try searching for another name.",
@@ -351,7 +355,7 @@
"chat_settings.options.block_user": "Block @{acct}",
"chat_settings.options.leave_chat": "Leave chat",
"chat_settings.options.unblock_user": "Unblock @{acct}",
- "chat_settings.title": "Chat Details",
+ "chat_settings.title": "Chat details",
"chat_settings.unblock.confirm": "Unblock",
"chat_settings.unblock.heading": "Unblock @{acct}",
"chat_settings.unblock.message": "Unblocking will allow this profile to direct message you and view your content.",