Add "More" to the sidebar menu with links to mutes, blocks, and so on (#34987)

app/javascript/mastodon/features/ui/components/more_link.tsx

@@ -0,0 +1,126 @@
+import { useMemo } from 'react';
+
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+
+import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
+import { openModal } from 'mastodon/actions/modal';
+import { Dropdown } from 'mastodon/components/dropdown_menu';
+import { Icon } from 'mastodon/components/icon';
+import { useIdentity } from 'mastodon/identity_context';
+import type { MenuItem } from 'mastodon/models/dropdown_menu';
+import { canManageReports, canViewAdminDashboard } from 'mastodon/permissions';
+import { useAppDispatch } from 'mastodon/store';
+
+const messages = defineMessages({
+  followedTags: {
+    id: 'navigation_bar.followed_tags',
+    defaultMessage: 'Followed hashtags',
+  },
+  blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
+  domainBlocks: {
+    id: 'navigation_bar.domain_blocks',
+    defaultMessage: 'Blocked domains',
+  },
+  mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
+  filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
+  administration: {
+    id: 'navigation_bar.administration',
+    defaultMessage: 'Administration',
+  },
+  moderation: { id: 'navigation_bar.moderation', defaultMessage: 'Moderation' },
+  logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
+  automatedDeletion: {
+    id: 'navigation_bar.automated_deletion',
+    defaultMessage: 'Automated post deletion',
+  },
+  accountSettings: {
+    id: 'navigation_bar.account_settings',
+    defaultMessage: 'Password and security',
+  },
+  importExport: {
+    id: 'navigation_bar.import_export',
+    defaultMessage: 'Import and export',
+  },
+  privacyAndReach: {
+    id: 'navigation_bar.privacy_and_reach',
+    defaultMessage: 'Privacy and reach',
+  },
+});
+
+export const MoreLink: React.FC = () => {
+  const intl = useIntl();
+  const { permissions } = useIdentity();
+  const dispatch = useAppDispatch();
+
+  const menu = useMemo(() => {
+    const arr: MenuItem[] = [
+      {
+        text: intl.formatMessage(messages.followedTags),
+        to: '/followed_tags',
+      },
+      null,
+      { text: intl.formatMessage(messages.filters), href: '/filters' },
+      { text: intl.formatMessage(messages.mutes), to: '/mutes' },
+      { text: intl.formatMessage(messages.blocks), to: '/blocks' },
+      {
+        text: intl.formatMessage(messages.domainBlocks),
+        to: '/domain_blocks',
+      },
+    ];
+
+    arr.push(
+      null,
+      {
+        href: '/settings/privacy',
+        text: intl.formatMessage(messages.privacyAndReach),
+      },
+      {
+        href: '/statuses_cleanup',
+        text: intl.formatMessage(messages.automatedDeletion),
+      },
+      {
+        href: '/auth/edit',
+        text: intl.formatMessage(messages.accountSettings),
+      },
+      {
+        href: '/settings/export',
+        text: intl.formatMessage(messages.importExport),
+      },
+    );
+
+    if (canManageReports(permissions)) {
+      arr.push(null, {
+        href: '/admin/reports',
+        text: intl.formatMessage(messages.moderation),
+      });
+    }
+
+    if (canViewAdminDashboard(permissions)) {
+      arr.push({
+        href: '/admin/dashboard',
+        text: intl.formatMessage(messages.administration),
+      });
+    }
+
+    const handleLogoutClick = () => {
+      dispatch(openModal({ modalType: 'CONFIRM_LOG_OUT', modalProps: {} }));
+    };
+
+    arr.push(null, {
+      text: intl.formatMessage(messages.logout),
+      action: handleLogoutClick,
+    });
+
+    return arr;
+  }, [intl, dispatch, permissions]);
+
+  return (
+    <Dropdown items={menu}>
+      <button className='column-link column-link--transparent'>
+        <Icon id='' icon={MoreHorizIcon} className='column-link__icon' />
+
+        <FormattedMessage id='navigation_bar.more' defaultMessage='More' />
+      </button>
+    </Dropdown>
+  );
+};

app/javascript/mastodon/features/ui/components/navigation_panel.tsx

@@ -16,12 +16,10 @@ import BookmarksActiveIcon from '@/material-icons/400-24px/bookmarks-fill.svg?re
 import BookmarksIcon from '@/material-icons/400-24px/bookmarks.svg?react';
 import ExploreActiveIcon from '@/material-icons/400-24px/explore-fill.svg?react';
 import ExploreIcon from '@/material-icons/400-24px/explore.svg?react';
-import ModerationIcon from '@/material-icons/400-24px/gavel.svg?react';
 import HomeActiveIcon from '@/material-icons/400-24px/home-fill.svg?react';
 import HomeIcon from '@/material-icons/400-24px/home.svg?react';
 import InfoIcon from '@/material-icons/400-24px/info.svg?react';
 import LogoutIcon from '@/material-icons/400-24px/logout.svg?react';
-import AdministrationIcon from '@/material-icons/400-24px/manufacturing.svg?react';
 import NotificationsActiveIcon from '@/material-icons/400-24px/notifications-fill.svg?react';
 import NotificationsIcon from '@/material-icons/400-24px/notifications.svg?react';
 import PersonAddActiveIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
@@ -43,13 +41,13 @@ import { useBreakpoint } from 'mastodon/features/ui/hooks/useBreakpoint';
 import { useIdentity } from 'mastodon/identity_context';
 import { timelinePreview, trendsEnabled, me } from 'mastodon/initial_state';
 import { transientSingleColumn } from 'mastodon/is_mobile';
-import { canManageReports, canViewAdminDashboard } from 'mastodon/permissions';
 import { selectUnreadNotificationGroupsCount } from 'mastodon/selectors/notifications';
 import { useAppSelector, useAppDispatch } from 'mastodon/store';
 
 import { ColumnLink } from './column_link';
 import DisabledAccountBanner from './disabled_account_banner';
 import { ListPanel } from './list_panel';
+import { MoreLink } from './more_link';
 import SignInBanner from './sign_in_banner';
 
 const messages = defineMessages({
@@ -67,11 +65,6 @@ const messages = defineMessages({
     id: 'navigation_bar.preferences',
     defaultMessage: 'Preferences',
   },
-  administration: {
-    id: 'navigation_bar.administration',
-    defaultMessage: 'Administration',
-  },
-  moderation: { id: 'navigation_bar.moderation', defaultMessage: 'Moderation' },
   followsAndFollowers: {
     id: 'navigation_bar.follows_and_followers',
     defaultMessage: 'Follows and followers',
@@ -227,7 +220,7 @@ const MENU_WIDTH = 284;
 
 export const NavigationPanel: React.FC = () => {
   const intl = useIntl();
-  const { signedIn, disabledAccountId, permissions } = useIdentity();
+  const { signedIn, disabledAccountId } = useIdentity();
   const open = useAppSelector((state) => state.navigation.open);
   const dispatch = useAppDispatch();
   const openable = useBreakpoint('openable');
@@ -450,31 +443,13 @@ export const NavigationPanel: React.FC = () => {
                   text={intl.formatMessage(messages.preferences)}
                 />
 
-                {canManageReports(permissions) && (
-                  <ColumnLink
-                    optional
-                    transparent
-                    href='/admin/reports'
-                    icon='flag'
-                    iconComponent={ModerationIcon}
-                    text={intl.formatMessage(messages.moderation)}
-                  />
-                )}
-                {canViewAdminDashboard(permissions) && (
-                  <ColumnLink
-                    optional
-                    transparent
-                    href='/admin/dashboard'
-                    icon='tachometer'
-                    iconComponent={AdministrationIcon}
-                    text={intl.formatMessage(messages.administration)}
-                  />
-                )}
+                <MoreLink />
               </>
             )}
 
             <div className='navigation-panel__legal'>
               <hr />
+
               <ColumnLink
                 transparent
                 to='/about'