Always show /conversations link

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
2024-08-30 00:04:30 +02:00
parent 1b1afdd0cc
commit 7952c73171
5 changed files with 78 additions and 69 deletions
--- 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'
--- 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
--- 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}
--- 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>
  );
 };
--- 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",