Merge remote-tracking branch 'parent/main' into upstream-20240828

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

@@ -1,28 +1,17 @@
-import type { MouseEventHandler } from 'react';
 import { useCallback, useState } from 'react';
 
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import classNames from 'classnames';
-import { useHistory } from 'react-router';
-
-import type Immutable from 'immutable';
 
 import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
-import AttachmentList from 'mastodon/components/attachment_list';
+import { Button } from 'mastodon/components/button';
 import { Icon } from 'mastodon/components/icon';
-import { VisibilityIcon } from 'mastodon/components/visibility_icon';
 import PrivacyDropdown from 'mastodon/features/compose/components/privacy_dropdown';
-import type { Account } from 'mastodon/models/account';
+import { EmbeddedStatus } from 'mastodon/features/notifications_v2/components/embedded_status';
 import type { Status, StatusVisibility } from 'mastodon/models/status';
 import { useAppSelector } from 'mastodon/store';
 
-import { Avatar } from '../../../components/avatar';
-import { Button } from '../../../components/button';
-import { DisplayName } from '../../../components/display_name';
-import { RelativeTimestamp } from '../../../components/relative_timestamp';
-import StatusContent from '../../../components/status_content';
-
 const messages = defineMessages({
   cancel_reblog: {
     id: 'status.cancel_reblog_private',
@@ -37,19 +26,18 @@ export const BoostModal: React.FC<{
   onReblog: (status: Status, privacy: StatusVisibility) => void;
 }> = ({ status, onReblog, onClose }) => {
   const intl = useIntl();
-  const history = useHistory();
 
-  const default_privacy = useAppSelector(
+  const defaultPrivacy = useAppSelector(
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
     (state) => state.compose.get('default_privacy') as StatusVisibility,
   );
 
-  const account = status.get('account') as Account;
+  const statusId = status.get('id') as string;
   const statusVisibility = (status.get('limited_scope') ||
     status.get('visibility_ex')) as StatusVisibility;
 
   const [privacy, setPrivacy] = useState<StatusVisibility>(
-    statusVisibility === 'private' ? 'private' : default_privacy,
+    statusVisibility === 'private' ? 'private' : defaultPrivacy,
   );
 
   const onPrivacyChange = useCallback((value: StatusVisibility) => {
@@ -61,20 +49,9 @@ export const BoostModal: React.FC<{
     onClose();
   }, [onClose, onReblog, status, privacy]);
 
-  const handleAccountClick = useCallback<MouseEventHandler>(
-    (e) => {
-      if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-        e.preventDefault();
-        onClose();
-        history.push(`/@${account.acct}`);
-      }
-    },
-    [history, onClose, account],
-  );
-
-  const buttonText = status.get('reblogged')
-    ? messages.cancel_reblog
-    : messages.reblog;
+  const handleCancel = useCallback(() => {
+    onClose();
+  }, [onClose]);
 
   const findContainer = useCallback(
     () => document.getElementsByClassName('modal-root__container')[0],
@@ -82,82 +59,79 @@ export const BoostModal: React.FC<{
   );
 
   return (
-    <div className='modal-root__modal boost-modal'>
-      <div className='boost-modal__container'>
-        <div
-          className={classNames(
-            'status',
-            `status-${statusVisibility}`,
-            'light',
-          )}
-        >
-          <div className='status__info'>
-            <a
-              href={`/@${account.acct}/${status.get('id') as string}`}
-              className='status__relative-time'
-              target='_blank'
-              rel='noopener noreferrer'
-            >
-              <span className='status__visibility-icon'>
-                <VisibilityIcon visibility={statusVisibility} />
-              </span>
-              <RelativeTimestamp
-                timestamp={status.get('created_at') as string}
-              />
-            </a>
-
-            <a
-              onClick={handleAccountClick}
-              href={`/@${account.acct}`}
-              className='status__display-name'
-            >
-              <div className='status__avatar'>
-                <Avatar account={account} size={48} />
-              </div>
-
-              <DisplayName account={account} />
-            </a>
+    <div className='modal-root__modal safety-action-modal'>
+      <div className='safety-action-modal__top'>
+        <div className='safety-action-modal__header'>
+          <div className='safety-action-modal__header__icon'>
+            <Icon icon={RepeatIcon} id='retweet' />
           </div>
 
-          {/* @ts-expect-error Expected until StatusContent is typed */}
-          <StatusContent status={status} />
+          <div>
+            <h1>
+              {status.get('reblogged') ? (
+                <FormattedMessage
+                  id='boost_modal.undo_reblog'
+                  defaultMessage='Unboost post?'
+                />
+              ) : (
+                <FormattedMessage
+                  id='boost_modal.reblog'
+                  defaultMessage='Boost post?'
+                />
+              )}
+            </h1>
+            <div>
+              <FormattedMessage
+                id='boost_modal.combo'
+                defaultMessage='You can press {combo} to skip this next time'
+                values={{
+                  combo: (
+                    <span className='hotkey-combination'>
+                      <kbd>Shift</kbd>+<Icon id='retweet' icon={RepeatIcon} />
+                    </span>
+                  ),
+                }}
+              />
+            </div>
+          </div>
+        </div>
 
-          {(status.get('media_attachments') as Immutable.List<unknown>).size >
-            0 && (
-            <AttachmentList compact media={status.get('media_attachments')} />
-          )}
+        <div className='safety-action-modal__status'>
+          <EmbeddedStatus statusId={statusId} />
         </div>
       </div>
 
-      <div className='boost-modal__action-bar'>
-        <div>
-          <FormattedMessage
-            id='boost_modal.combo'
-            defaultMessage='You can press {combo} to skip this next time'
-            values={{
-              combo: (
-                <span>
-                  Shift + <Icon id='retweet' icon={RepeatIcon} />
-                </span>
-              ),
-            }}
+      <div className={classNames('safety-action-modal__bottom')}>
+        <div className='safety-action-modal__actions'>
+          {!status.get('reblogged') && (
+            <PrivacyDropdown
+              noDirect
+              noLimited
+              value={privacy}
+              container={findContainer}
+              onChange={onPrivacyChange}
+              disabled={statusVisibility === 'private'}
+            />
+          )}
+
+          <div className='spacer' />
+
+          <button onClick={handleCancel} className='link-button'>
+            <FormattedMessage
+              id='confirmation_modal.cancel'
+              defaultMessage='Cancel'
+            />
+          </button>
+
+          <Button
+            onClick={handleReblog}
+            text={intl.formatMessage(
+              status.get('reblogged')
+                ? messages.cancel_reblog
+                : messages.reblog,
+            )}
           />
         </div>
-        {statusVisibility !== 'private' && !status.get('reblogged') && (
-          <PrivacyDropdown
-            noDirect
-            noLimited
-            value={privacy}
-            container={findContainer}
-            onChange={onPrivacyChange}
-          />
-        )}
-        <Button
-          text={intl.formatMessage(buttonText)}
-          onClick={handleReblog}
-          // eslint-disable-next-line jsx-a11y/no-autofocus
-          autoFocus
-        />
       </div>
     </div>
   );

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

@@ -13,11 +13,13 @@ 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 PeopleIcon from '@/material-icons/400-24px/group.svg?react';
 import HomeActiveIcon from '@/material-icons/400-24px/home-fill.svg?react';
 import HomeIcon from '@/material-icons/400-24px/home.svg?react';
 import ListAltActiveIcon from '@/material-icons/400-24px/list_alt-fill.svg?react';
 import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
+import AdministrationIcon from '@/material-icons/400-24px/manufacturing.svg?react';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import NotificationsActiveIcon from '@/material-icons/400-24px/notifications-fill.svg?react';
 import NotificationsIcon from '@/material-icons/400-24px/notifications.svg?react';
@@ -36,7 +38,9 @@ import { NavigationPortal } from 'mastodon/components/navigation_portal';
 import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
 import { enableDtlMenu, timelinePreview, trendsEnabled, dtlTag, enableLocalTimeline, isHideItem } from 'mastodon/initial_state';
 import { transientSingleColumn } from 'mastodon/is_mobile';
+import { canManageReports, canViewAdminDashboard } from 'mastodon/permissions';
 import { selectUnreadNotificationGroupsCount } from 'mastodon/selectors/notifications';
+import { selectUseGroupedNotifications } from 'mastodon/selectors/settings';
 
 import ColumnLink from './column_link';
 import DisabledAccountBanner from './disabled_account_banner';
@@ -57,6 +61,8 @@ const messages = defineMessages({
   antennas: { id: 'navigation_bar.antennas', defaultMessage: 'Antennas' },
   circles: { id: 'navigation_bar.circles', defaultMessage: 'Circles' },
   preferences: { 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' },
   about: { id: 'navigation_bar.about', defaultMessage: 'About' },
   search: { id: 'navigation_bar.search', defaultMessage: 'Search' },
@@ -66,7 +72,7 @@ const messages = defineMessages({
 });
 
 const NotificationsLink = () => {
-  const optedInGroupedNotifications = useSelector((state) => state.getIn(['settings', 'notifications', 'groupingBeta'], false));
+  const optedInGroupedNotifications = useSelector(selectUseGroupedNotifications);
   const count = useSelector(state => state.getIn(['notifications', 'unread']));
   const intl = useIntl();
 
@@ -124,7 +130,7 @@ class NavigationPanel extends Component {
 
   render () {
     const { intl } = this.props;
-    const { signedIn, disabledAccountId } = this.props.identity;
+    const { signedIn, disabledAccountId, permissions } = this.props.identity;
 
     const explorer = (trendsEnabled ? (
       <ColumnLink transparent to='/explore' icon='explore' iconComponent={ExploreIcon} activeIconComponent={ExploreActiveIcon} text={intl.formatMessage(messages.explore)} />
@@ -206,6 +212,9 @@ class NavigationPanel extends Component {
             <hr />
 
             <ColumnLink transparent href='/settings/preferences' icon='cog' iconComponent={SettingsIcon} text={intl.formatMessage(messages.preferences)} />
+
+            {canManageReports(permissions) && <ColumnLink transparent href='/admin/reports' icon='flag' iconComponent={ModerationIcon} text={intl.formatMessage(messages.moderation)} />}
+            {canViewAdminDashboard(permissions) && <ColumnLink transparent href='/admin/dashboard' icon='tachometer' iconComponent={AdministrationIcon} text={intl.formatMessage(messages.administration)} />}
           </>
         )}
 

app/javascript/mastodon/features/ui/index.jsx

@@ -98,7 +98,7 @@ const mapStateToProps = state => ({
   isComposing: state.getIn(['compose', 'is_composing']),
   hasComposingText: state.getIn(['compose', 'text']).trim().length !== 0,
   hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0,
-  canUploadMore: !state.getIn(['compose', 'media_attachments']).some(x => ['audio', 'video'].includes(x.get('type'))) && state.getIn(['compose', 'media_attachments']).size < 4,
+  canUploadMore: !state.getIn(['compose', 'media_attachments']).some(x => ['audio', 'video'].includes(x.get('type'))) && state.getIn(['compose', 'media_attachments']).size < state.getIn(['server', 'server', 'configuration', 'statuses', 'max_media_attachments']),
   firstLaunch: state.getIn(['settings', 'introductionVersion'], 0) < INTRODUCTION_VERSION,
   username: state.getIn(['accounts', me, 'username']),
 });