From 7952c7317186126c7cfa5cff87b617d6f2813a0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 30 Aug 2024 00:04:30 +0200
Subject: [PATCH] Always show /conversations link
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../pl-fe/src/components/sidebar-menu.tsx     | 10 +++
 .../src/components/sidebar-navigation.tsx     | 54 +++++++------
 .../src/components/thumb-navigation-link.tsx  |  4 +-
 .../pl-fe/src/components/thumb-navigation.tsx | 76 +++++++++----------
 packages/pl-fe/src/locales/en.json            |  3 +-
 5 files changed, 78 insertions(+), 69 deletions(-)

diff --git a/packages/pl-fe/src/components/sidebar-menu.tsx b/packages/pl-fe/src/components/sidebar-menu.tsx
index 9f19a6381..1463efbd7 100644
--- a/packages/pl-fe/src/components/sidebar-menu.tsx
+++ b/packages/pl-fe/src/components/sidebar-menu.tsx
@@ -39,6 +39,7 @@ const messages = defineMessages({
   login: { id: 'account.login', defaultMessage: 'Log in' },
   register: { id: 'account.register', defaultMessage: 'Sign up' },
   sourceCode: { id: 'navigation.source_code', defaultMessage: 'Source code' },
+  conversations: { id: 'navigation.direct_messages', defaultMessage: 'Direct messages' },
 });
 
 interface ISidebarLink {
@@ -225,6 +226,15 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                     />
                   )}
 
+                  {features.conversations && (
+                    <SidebarLink
+                      to='/conversations'
+                      icon={require('@tabler/icons/outline/mail.svg')}
+                      text={intl.formatMessage(messages.conversations)}
+                      onClick={onClose}
+                    />
+                  )}
+
                   {features.bookmarks && (
                     <SidebarLink
                       to='/bookmarks'
diff --git a/packages/pl-fe/src/components/sidebar-navigation.tsx b/packages/pl-fe/src/components/sidebar-navigation.tsx
index b6ac4cae3..80c189952 100644
--- a/packages/pl-fe/src/components/sidebar-navigation.tsx
+++ b/packages/pl-fe/src/components/sidebar-navigation.tsx
@@ -22,6 +22,7 @@ const messages = defineMessages({
   developers: { id: 'navigation.developers', defaultMessage: 'Developers' },
   scheduledStatuses: { id: 'column.scheduled_statuses', defaultMessage: 'Scheduled posts' },
   drafts: { id: 'navigation.drafts', defaultMessage: 'Drafts' },
+  conversations: { id: 'navigation.direct_messages', defaultMessage: 'Direct messages' },
 });
 
 /** Desktop sidebar with links to different views in the app. */
@@ -46,6 +47,14 @@ const SidebarNavigation = () => {
     const menu: Menu = [];
 
     if (account) {
+      if (features.chats && features.conversations) {
+        menu.push({
+          to: '/conversations',
+          text: intl.formatMessage(messages.conversations),
+          icon: require('@tabler/icons/outline/mail.svg'),
+        });
+      }
+
       if (account.locked || followRequestsCount > 0) {
         menu.push({
           to: '/follow_requests',
@@ -127,33 +136,6 @@ const SidebarNavigation = () => {
 
   const menu = makeMenu();
 
-  /** Conditionally render the supported messages link */
-  const renderMessagesLink = (): React.ReactNode => {
-    if (features.chats) {
-      return (
-        <SidebarNavigationLink
-          to='/chats'
-          icon={require('@tabler/icons/outline/messages.svg')}
-          count={unreadChatsCount}
-          countMax={9}
-          text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
-        />
-      );
-    }
-
-    if (features.conversations) {
-      return (
-        <SidebarNavigationLink
-          to='/conversations'
-          icon={require('@tabler/icons/outline/mail.svg')}
-          text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
-        />
-      );
-    }
-
-    return null;
-  };
-
   return (
     <Stack space={4}>
 
@@ -198,7 +180,23 @@ const SidebarNavigation = () => {
               text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />}
             />
 
-            {renderMessagesLink()}
+            {features.chats && (
+              <SidebarNavigationLink
+                to='/chats'
+                icon={require('@tabler/icons/outline/messages.svg')}
+                count={unreadChatsCount}
+                countMax={9}
+                text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
+              />
+            )}
+
+            {!features.chats && features.conversations && (
+              <SidebarNavigationLink
+                to='/conversations'
+                icon={require('@tabler/icons/outline/mail.svg')}
+                text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Direct messages' />}
+              />
+            )}
 
             {features.groups && (
               <SidebarNavigationLink
diff --git a/packages/pl-fe/src/components/thumb-navigation-link.tsx b/packages/pl-fe/src/components/thumb-navigation-link.tsx
index 516455e97..fee1a6b35 100644
--- a/packages/pl-fe/src/components/thumb-navigation-link.tsx
+++ b/packages/pl-fe/src/components/thumb-navigation-link.tsx
@@ -11,7 +11,7 @@ interface IThumbNavigationLink {
   countMax?: number;
   src: string;
   activeSrc?: string;
-  text: string | React.ReactElement;
+  text: string;
   to: string;
   exact?: boolean;
   paths?: Array<string>;
@@ -34,7 +34,7 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
   const icon = (active && activeSrc) || src;
 
   return (
-    <NavLink to={to} exact={exact} className='flex flex-1 flex-col items-center space-y-1 px-2 py-4 text-lg text-gray-600'>
+    <NavLink to={to} exact={exact} className='flex flex-1 flex-col items-center space-y-1 px-2 py-4 text-lg text-gray-600' title={text}>
       {!demetricator && count !== undefined ? (
         <IconWithCounter
           src={icon}
diff --git a/packages/pl-fe/src/components/thumb-navigation.tsx b/packages/pl-fe/src/components/thumb-navigation.tsx
index 1c0281dd0..faa7d288e 100644
--- a/packages/pl-fe/src/components/thumb-navigation.tsx
+++ b/packages/pl-fe/src/components/thumb-navigation.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
 
 import { groupComposeModal } from 'pl-fe/actions/compose';
@@ -13,7 +13,17 @@ import { isStandalone } from 'pl-fe/utils/state';
 
 import { Icon } from './ui';
 
+const messages = defineMessages({
+  home: { id: 'navigation.home', defaultMessage: 'Home' },
+  search: { id: 'navigation.search', defaultMessage: 'Search' },
+  notifications: { id: 'navigation.notifications', defaultMessage: 'Notifications' },
+  chats: { id: 'navigation.chats', defaultMessage: 'Chats' },
+  compose: { id: 'navigation.compose', defaultMessage: 'Compose' },
+  sidebar: { id: 'navigation.sidebar', defaultMessage: 'Open sidebar' },
+});
+
 const ThumbNavigation: React.FC = (): JSX.Element => {
+  const intl = useIntl();
   const dispatch = useAppDispatch();
   const { account } = useOwnAccount();
   const features = useFeatures();
@@ -38,37 +48,12 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
     }
   };
 
-  /** Conditionally render the supported messages link */
-  const renderMessagesLink = (): React.ReactNode => {
-    if (features.chats) {
-      return (
-        <ThumbNavigationLink
-          src={require('@tabler/icons/outline/messages.svg')}
-          text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
-          to='/chats'
-          exact
-          count={unreadChatsCount}
-          countMax={9}
-        />
-      );
-    }
-
-    if (features.conversations) {
-      return (
-        <ThumbNavigationLink
-          src={require('@tabler/icons/outline/mail.svg')}
-          activeSrc={require('@tabler/icons/filled/mail.svg')}
-          text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
-          to='/conversations'
-        />
-      );
-    }
-
-    return null;
-  };
-
   const composeButton = (
-    <button className='flex flex-1 flex-col items-center px-1.5 py-3.5 text-lg text-gray-600' onClick={handleOpenComposeModal}>
+    <button
+      className='flex flex-1 flex-col items-center px-1.5 py-3.5 text-lg text-gray-600'
+      onClick={handleOpenComposeModal}
+      title={intl.formatMessage(messages.compose)}
+    >
       <Icon
         src={require('@tabler/icons/outline/square-rounded-plus.svg')}
         className='h-6 w-6 text-gray-600 black:text-white'
@@ -78,7 +63,11 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
 
   return (
     <div className='fixed inset-x-0 bottom-0 z-50 flex w-full overflow-x-auto border-t border-solid border-gray-200 bg-white/90 shadow-2xl backdrop-blur-md black:bg-black/80 lg:hidden dark:border-gray-800 dark:bg-primary-900/90'>
-      <button className='flex flex-1 flex-col items-center px-2 py-4 text-lg text-gray-600' onClick={handleOpenSidebar}>
+      <button
+        className='flex flex-1 flex-col items-center px-2 py-4 text-lg text-gray-600'
+        onClick={handleOpenSidebar}
+        title={intl.formatMessage(messages.sidebar)}
+      >
         <Icon
           src={require('@tabler/icons/outline/menu-2.svg')}
           className='h-5 w-5 text-gray-600 black:text-white'
@@ -88,7 +77,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
       <ThumbNavigationLink
         src={require('@tabler/icons/outline/home.svg')}
         activeSrc={require('@tabler/icons/filled/home.svg')}
-        text={<FormattedMessage id='navigation.home' defaultMessage='Home' />}
+        text={intl.formatMessage(messages.home)}
         to='/'
         exact
       />
@@ -103,12 +92,12 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
         />
       )} */}
 
-      {account && !(features.chats || features.conversations) && composeButton}
+      {account && !features.chats && composeButton}
 
       {(!standalone || account) && (
         <ThumbNavigationLink
           src={require('@tabler/icons/outline/search.svg')}
-          text={<FormattedMessage id='navigation.search' defaultMessage='Search' />}
+          text={intl.formatMessage(messages.search)}
           to='/search'
           exact
         />
@@ -118,16 +107,27 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
         <ThumbNavigationLink
           src={require('@tabler/icons/outline/bell.svg')}
           activeSrc={require('@tabler/icons/filled/bell.svg')}
-          text={<FormattedMessage id='navigation.notifications' defaultMessage='Notifications' />}
+          text={intl.formatMessage(messages.notifications)}
           to='/notifications'
           exact
           count={notificationCount}
         />
       )}
 
-      {account && renderMessagesLink()}
+      {account && features.chats && (
+        <>
+          <ThumbNavigationLink
+            src={require('@tabler/icons/outline/messages.svg')}
+            text={intl.formatMessage(messages.chats)}
+            to='/chats'
+            exact
+            count={unreadChatsCount}
+            countMax={9}
+          />
 
-      {account && (features.chats || features.conversations) && composeButton}
+          {composeButton}
+        </>
+      )}
     </div>
   );
 };
diff --git a/packages/pl-fe/src/locales/en.json b/packages/pl-fe/src/locales/en.json
index 42a67a2f7..eccaf6b2c 100644
--- a/packages/pl-fe/src/locales/en.json
+++ b/packages/pl-fe/src/locales/en.json
@@ -1066,11 +1066,12 @@
   "navigation.compose_group": "Compose to group",
   "navigation.dashboard": "Dashboard",
   "navigation.developers": "Developers",
-  "navigation.direct_messages": "Messages",
+  "navigation.direct_messages": "Direct messages",
   "navigation.drafts": "Drafts",
   "navigation.home": "Home",
   "navigation.notifications": "Notifications",
   "navigation.search": "Search",
+  "navigation.sidebar": "Open sidebar",
   "navigation.source_code": "Source code",
   "navigation_bar.account_aliases": "Account aliases",
   "navigation_bar.blocks": "Blocks",