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

app/javascript/mastodon/features/account_timeline/components/account_header.tsx

@@ -418,7 +418,7 @@ export const AccountHeader: React.FC<{
       return arr;
     }
 
-    if (signedIn && account.id !== me && !account.suspended) {
+    if (signedIn && !account.suspended) {
       arr.push({
         text: intl.formatMessage(messages.mention, {
           name: account.username,
@@ -442,37 +442,7 @@ export const AccountHeader: React.FC<{
       arr.push(null);
     }
 
-    if (account.id === me) {
+    if (signedIn) {
-      arr.push({
-        text: intl.formatMessage(messages.edit_profile),
-        href: '/settings/profile',
-      });
-      arr.push({
-        text: intl.formatMessage(messages.preferences),
-        href: '/settings/preferences',
-      });
-      arr.push(null);
-      arr.push({
-        text: intl.formatMessage(messages.follow_requests),
-        to: '/follow_requests',
-      });
-      arr.push({
-        text: intl.formatMessage(messages.favourites),
-        to: '/favourites',
-      });
-      arr.push({ text: intl.formatMessage(messages.lists), to: '/lists' });
-      arr.push({
-        text: intl.formatMessage(messages.followed_tags),
-        to: '/followed_tags',
-      });
-      arr.push(null);
-      arr.push({ text: intl.formatMessage(messages.mutes), to: '/mutes' });
-      arr.push({ text: intl.formatMessage(messages.blocks), to: '/blocks' });
-      arr.push({
-        text: intl.formatMessage(messages.domain_blocks),
-        to: '/domain_blocks',
-      });
-    } else if (signedIn) {
       if (relationship?.following) {
         if (!relationship.muting) {
           if (relationship.showing_reblogs) {
@@ -611,8 +581,7 @@ export const AccountHeader: React.FC<{
     }
 
     if (
-      (account.id !== me &&
+      (permissions & PERMISSION_MANAGE_USERS) === PERMISSION_MANAGE_USERS ||
-        (permissions & PERMISSION_MANAGE_USERS) === PERMISSION_MANAGE_USERS) ||
       (isRemote &&
         (permissions & PERMISSION_MANAGE_FEDERATION) ===
           PERMISSION_MANAGE_FEDERATION)
@@ -880,12 +849,14 @@ export const AccountHeader: React.FC<{
             <div className='account__header__tabs__buttons'>
               {!hidden && bellBtn}
               {!hidden && shareBtn}
-              <Dropdown
+              {accountId !== me && (
-                disabled={menu.length === 0}
+                <Dropdown
-                items={menu}
+                  disabled={menu.length === 0}
-                icon='ellipsis-v'
+                  items={menu}
-                iconComponent={MoreHorizIcon}
+                  icon='ellipsis-v'
-              />
+                  iconComponent={MoreHorizIcon}
+                />
+              )}
               {!hidden && actionBtn}
             </div>
           </div>

app/javascript/mastodon/features/compose/components/action_bar.tsx

@@ -1,81 +0,0 @@
-import { useMemo } from 'react';
-
-import { defineMessages, useIntl } 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 { useAppDispatch } from 'mastodon/store';
-
-const messages = defineMessages({
-  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
-  preferences: {
-    id: 'navigation_bar.preferences',
-    defaultMessage: 'Preferences',
-  },
-  follow_requests: {
-    id: 'navigation_bar.follow_requests',
-    defaultMessage: 'Follow requests',
-  },
-  favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favorites' },
-  lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' },
-  followed_tags: {
-    id: 'navigation_bar.followed_tags',
-    defaultMessage: 'Followed hashtags',
-  },
-  blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
-  domain_blocks: {
-    id: 'navigation_bar.domain_blocks',
-    defaultMessage: 'Blocked domains',
-  },
-  mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
-  filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
-  logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
-  bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' },
-});
-
-export const ActionBar: React.FC = () => {
-  const dispatch = useAppDispatch();
-  const intl = useIntl();
-
-  const menu = useMemo(() => {
-    const handleLogoutClick = () => {
-      dispatch(openModal({ modalType: 'CONFIRM_LOG_OUT', modalProps: {} }));
-    };
-
-    return [
-      {
-        text: intl.formatMessage(messages.edit_profile),
-        href: '/settings/profile',
-      },
-      {
-        text: intl.formatMessage(messages.preferences),
-        href: '/settings/preferences',
-      },
-      null,
-      {
-        text: intl.formatMessage(messages.follow_requests),
-        to: '/follow_requests',
-      },
-      { text: intl.formatMessage(messages.favourites), to: '/favourites' },
-      { text: intl.formatMessage(messages.bookmarks), to: '/bookmarks' },
-      { text: intl.formatMessage(messages.lists), to: '/lists' },
-      {
-        text: intl.formatMessage(messages.followed_tags),
-        to: '/followed_tags',
-      },
-      null,
-      { text: intl.formatMessage(messages.mutes), to: '/mutes' },
-      { text: intl.formatMessage(messages.blocks), to: '/blocks' },
-      {
-        text: intl.formatMessage(messages.domain_blocks),
-        to: '/domain_blocks',
-      },
-      { text: intl.formatMessage(messages.filters), href: '/filters' },
-      null,
-      { text: intl.formatMessage(messages.logout), action: handleLogoutClick },
-    ];
-  }, [intl, dispatch]);
-
-  return <Dropdown items={menu} icon='bars' iconComponent={MoreHorizIcon} />;
-};

app/javascript/mastodon/features/compose/components/navigation_bar.tsx

@@ -9,8 +9,6 @@ import { IconButton } from 'mastodon/components/icon_button';
 import { me } from 'mastodon/initial_state';
 import { useAppDispatch, useAppSelector } from 'mastodon/store';
 
-import { ActionBar } from './action_bar';
-
 const messages = defineMessages({
   cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
 });
@@ -33,15 +31,14 @@ export const NavigationBar: React.FC = () => {
   return (
     <div className='navigation-bar'>
       <Account id={me} minimal />
-      {isReplying ? (
+
+      {isReplying && (
         <IconButton
           title={intl.formatMessage(messages.cancel)}
           icon=''
           iconComponent={CloseIcon}
           onClick={handleCancelClick}
         />
-      ) : (
-        <ActionBar />
       )}
     </div>
   );

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) && (
+                <MoreLink />
-                  <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)}
-                  />
-                )}
               </>
             )}
 
             <div className='navigation-panel__legal'>
               <hr />
+
               <ColumnLink
                 transparent
                 to='/about'

app/javascript/mastodon/locales/en.json

@@ -552,8 +552,10 @@
   "mute_modal.you_wont_see_mentions": "You won't see posts that mention them.",
   "mute_modal.you_wont_see_posts": "They can still see your posts, but you won't see theirs.",
   "navigation_bar.about": "About",
+  "navigation_bar.account_settings": "Password and security",
   "navigation_bar.administration": "Administration",
   "navigation_bar.advanced_interface": "Open in advanced web interface",
+  "navigation_bar.automated_deletion": "Automated post deletion",
   "navigation_bar.blocks": "Blocked users",
   "navigation_bar.bookmarks": "Bookmarks",
   "navigation_bar.community_timeline": "Local timeline",
@@ -567,14 +569,17 @@
   "navigation_bar.follow_requests": "Follow requests",
   "navigation_bar.followed_tags": "Followed hashtags",
   "navigation_bar.follows_and_followers": "Follows and followers",
+  "navigation_bar.import_export": "Import and export",
   "navigation_bar.lists": "Lists",
   "navigation_bar.logout": "Logout",
   "navigation_bar.moderation": "Moderation",
+  "navigation_bar.more": "More",
   "navigation_bar.mutes": "Muted users",
   "navigation_bar.opened_in_classic_interface": "Posts, accounts, and other specific pages are opened by default in the classic web interface.",
   "navigation_bar.personal": "Personal",
   "navigation_bar.pins": "Pinned posts",
   "navigation_bar.preferences": "Preferences",
+  "navigation_bar.privacy_and_reach": "Privacy and reach",
   "navigation_bar.public_timeline": "Federated timeline",
   "navigation_bar.search": "Search",
   "navigation_bar.security": "Security",

app/javascript/styles/mastodon/components.scss

@@ -6347,6 +6347,7 @@ a.status-card {
   @media screen and (max-width: $no-columns-breakpoint) {
     border-bottom: 0;
     border-radius: 4px 4px 0 0;
+    padding-bottom: env(safe-area-inset-bottom);
   }
 }
 

spec/system/log_out_spec.rb

@@ -32,8 +32,8 @@ RSpec.describe 'Log out' do
       expect(page)
         .to have_css('body', class: 'app-body')
 
-      within '.navigation-bar' do
+      within '.navigation-panel' do
-        click_on 'Menu'
+        click_on 'More'
       end
 
       within '.dropdown-menu' do