Merge commit '079d681ac6f279f3a7a6be5c3734549f3be8f912' into glitch-soc/merge-upstream

Conflicts:
- `app/javascript/material-icons/400-24px/code.svg`:
  Icon newly-introduced upstream.
  Used upstream's more recent version.
- `app/javascript/material-icons/400-24px/mail.svg`:
  Icon newly-introduced upstream.
  Used upstream's more recent version.
- `app/javascript/material-icons/400-24px/manufacturing.svg`:
  Icon newly-introduced upstream.
  Used upstream's more recent version.
- `app/views/admin/settings/shared/_links.html.haml`:
  Glitch-soc had extra menu items, ported the changes for them too.
- `config/navigation.rb`:
  Glitch-soc had extra menu items, ported the changes for them too.

app/javascript/mastodon/features/compose/components/privacy_dropdown.jsx

@@ -11,10 +11,9 @@ import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?re
 import LockIcon from '@/material-icons/400-24px/lock.svg?react';
 import PublicIcon from '@/material-icons/400-24px/public.svg?react';
 import QuietTimeIcon from '@/material-icons/400-24px/quiet_time.svg?react';
+import { DropdownSelector } from 'mastodon/components/dropdown_selector';
 import { Icon }  from 'mastodon/components/icon';
 
-import { PrivacyDropdownMenu } from './privacy_dropdown_menu';
-
 const messages = defineMessages({
   public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
   public_long: { id: 'privacy.public.long', defaultMessage: 'Anyone on and off Mastodon' },
@@ -143,7 +142,7 @@ class PrivacyDropdown extends PureComponent {
           {({ props, placement }) => (
             <div {...props}>
               <div className={`dropdown-animation privacy-dropdown__dropdown ${placement}`}>
-                <PrivacyDropdownMenu
+                <DropdownSelector
                   items={this.options}
                   value={value}
                   onClose={this.handleClose}

app/javascript/mastodon/features/compose/components/privacy_dropdown_menu.jsx

@@ -1,128 +0,0 @@
-import PropTypes from 'prop-types';
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import classNames from 'classnames';
-
-import { supportsPassiveEvents } from 'detect-passive-events';
-
-import InfoIcon from '@/material-icons/400-24px/info.svg?react';
-import { Icon } from 'mastodon/components/icon';
-
-const listenerOptions = supportsPassiveEvents ? { passive: true, capture: true } : true;
-
-export const PrivacyDropdownMenu = ({ style, items, value, onClose, onChange }) => {
-  const nodeRef = useRef(null);
-  const focusedItemRef = useRef(null);
-  const [currentValue, setCurrentValue] = useState(value);
-
-  const handleDocumentClick = useCallback((e) => {
-    if (nodeRef.current && !nodeRef.current.contains(e.target)) {
-      onClose();
-      e.stopPropagation();
-    }
-  }, [nodeRef, onClose]);
-
-  const handleClick = useCallback((e) => {
-    const value = e.currentTarget.getAttribute('data-index');
-
-    e.preventDefault();
-
-    onClose();
-    onChange(value);
-  }, [onClose, onChange]);
-
-  const handleKeyDown = useCallback((e) => {
-    const value = e.currentTarget.getAttribute('data-index');
-    const index = items.findIndex(item => (item.value === value));
-
-    let element = null;
-
-    switch (e.key) {
-    case 'Escape':
-      onClose();
-      break;
-    case ' ':
-    case 'Enter':
-      handleClick(e);
-      break;
-    case 'ArrowDown':
-      element = nodeRef.current.childNodes[index + 1] || nodeRef.current.firstChild;
-      break;
-    case 'ArrowUp':
-      element = nodeRef.current.childNodes[index - 1] || nodeRef.current.lastChild;
-      break;
-    case 'Tab':
-      if (e.shiftKey) {
-        element = nodeRef.current.childNodes[index + 1] || nodeRef.current.firstChild;
-      } else {
-        element = nodeRef.current.childNodes[index - 1] || nodeRef.current.lastChild;
-      }
-      break;
-    case 'Home':
-      element = nodeRef.current.firstChild;
-      break;
-    case 'End':
-      element = nodeRef.current.lastChild;
-      break;
-    }
-
-    if (element) {
-      element.focus();
-      setCurrentValue(element.getAttribute('data-index'));
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  }, [nodeRef, items, onClose, handleClick, setCurrentValue]);
-
-  useEffect(() => {
-    document.addEventListener('click', handleDocumentClick, { capture: true });
-    document.addEventListener('touchend', handleDocumentClick, listenerOptions);
-    focusedItemRef.current?.focus({ preventScroll: true });
-
-    return () => {
-      document.removeEventListener('click', handleDocumentClick, { capture: true });
-      document.removeEventListener('touchend', handleDocumentClick, listenerOptions);
-    };
-  }, [handleDocumentClick]);
-
-  return (
-    <ul style={{ ...style }} role='listbox' ref={nodeRef}>
-      {items.map(item => (
-        <li
-          role='option'
-          tabIndex={0}
-          key={item.value}
-          data-index={item.value}
-          onKeyDown={handleKeyDown}
-          onClick={handleClick}
-          className={classNames('privacy-dropdown__option', { active: item.value === currentValue })}
-          aria-selected={item.value === currentValue}
-          ref={item.value === currentValue ? focusedItemRef : null}
-        >
-          <div className='privacy-dropdown__option__icon'>
-            <Icon id={item.icon} icon={item.iconComponent} />
-          </div>
-
-          <div className='privacy-dropdown__option__content'>
-            <strong>{item.text}</strong>
-            {item.meta}
-          </div>
-
-          {item.extra && (
-            <div className='privacy-dropdown__option__additional' title={item.extra}>
-              <Icon id='info-circle' icon={InfoIcon} />
-            </div>
-          )}
-        </li>
-      ))}
-    </ul>
-  );
-};
-
-PrivacyDropdownMenu.propTypes = {
-  style: PropTypes.object,
-  items: PropTypes.array.isRequired,
-  value: PropTypes.string.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-};

app/javascript/mastodon/features/notifications/components/policy_controls.tsx

@@ -7,6 +7,9 @@ import { useAppSelector, useAppDispatch } from 'mastodon/store';
 
 import { CheckboxWithLabel } from './checkbox_with_label';
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+
 export const PolicyControls: React.FC = () => {
   const dispatch = useAppDispatch();
 
@@ -135,6 +138,21 @@ export const PolicyControls: React.FC = () => {
             />
           </span>
         </CheckboxWithLabel>
+
+        <CheckboxWithLabel checked disabled onChange={noop}>
+          <strong>
+            <FormattedMessage
+              id='notifications.policy.filter_limited_accounts_title'
+              defaultMessage='Moderated accounts'
+            />
+          </strong>
+          <span className='hint'>
+            <FormattedMessage
+              id='notifications.policy.filter_limited_accounts_hint'
+              defaultMessage='Limited by server moderators'
+            />
+          </span>
+        </CheckboxWithLabel>
       </div>
     </section>
   );

app/javascript/mastodon/features/notifications/request.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { useRef, useCallback, useEffect } from 'react';
 
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import { Helmet } from 'react-helmet';
 
@@ -90,6 +90,23 @@ export const NotificationRequest = ({ multiColumn, params: { id } }) => {
 
   const columnTitle = intl.formatMessage(messages.title, { name: account?.get('display_name') || account?.get('username') });
 
+  let explainer = null;
+
+  if (account?.limited) {
+    const isLocal = account.acct.indexOf('@') === -1;
+    explainer = (
+      <div className='dismissable-banner'>
+        <div className='dismissable-banner__message'>
+          {isLocal ? (
+            <FormattedMessage id='notification_requests.explainer_for_limited_account' defaultMessage='Notifications from this account have been filtered because the account has been limited by a moderator.' />
+          ) : (
+            <FormattedMessage id='notification_requests.explainer_for_limited_remote_account' defaultMessage='Notifications from this account have been filtered because the account or its server has been limited by a moderator.' />
+          )}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <Column bindToDocument={!multiColumn} ref={columnRef} label={columnTitle}>
       <ColumnHeader
@@ -109,6 +126,7 @@ export const NotificationRequest = ({ multiColumn, params: { id } }) => {
 
       <SensitiveMediaContextProvider hideMediaByDefault>
         <ScrollableList
+          prepend={explainer}
           scrollKey={`notification_requests/${id}`}
           trackScroll={!multiColumn}
           bindToDocument={!multiColumn}