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

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

@@ -1,18 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { length } from 'stringz';
-
-export const CharacterCounter = ({ text, max }) => {
-  const diff = max - length(text);
-
-  if (diff < 0) {
-    return <span className='character-counter character-counter--over'>{diff}</span>;
-  }
-
-  return <span className='character-counter'>{diff}</span>;
-};
-
-CharacterCounter.propTypes = {
-  text: PropTypes.string.isRequired,
-  max: PropTypes.number.isRequired,
-};

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

@@ -0,0 +1,16 @@
+import { length } from 'stringz';
+
+export const CharacterCounter: React.FC<{
+  text: string;
+  max: number;
+}> = ({ text, max }) => {
+  const diff = max - length(text);
+
+  if (diff < 0) {
+    return (
+      <span className='character-counter character-counter--over'>{diff}</span>
+    );
+  }
+
+  return <span className='character-counter'>{diff}</span>;
+};

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

@@ -332,6 +332,7 @@ class ComposeForm extends ImmutablePureComponent {
               <div className='compose-form__submit'>
                 <Button
                   type='submit'
+                  compact
                   text={intl.formatMessage(this.props.isEditing ? messages.saveChanges : (this.props.isInReply ? messages.reply : messages.publish))}
                   disabled={!this.canSubmit()}
                 />

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

@@ -27,6 +27,7 @@ class LanguageDropdownMenu extends PureComponent {
 
   static propTypes = {
     value: PropTypes.string.isRequired,
+    guess: PropTypes.string,
     frequentlyUsedLanguages: PropTypes.arrayOf(PropTypes.string).isRequired,
     onClose: PropTypes.func.isRequired,
     onChange: PropTypes.func.isRequired,
@@ -81,14 +82,17 @@ class LanguageDropdownMenu extends PureComponent {
   };
 
   search () {
-    const { languages, value, frequentlyUsedLanguages } = this.props;
+    const { languages, value, frequentlyUsedLanguages, guess } = this.props;
     const { searchValue } = this.state;
 
     if (searchValue === '') {
       return [...languages].sort((a, b) => {
-        // Push current selection to the top of the list
 
-        if (a[0] === value) {
+        if (guess && a[0] === guess) { // Push guessed language higher than current selection
+          return -1;
+        } else if (guess && b[0] === guess) {
+          return 1;
+        } else if (a[0] === value) { // Push current selection to the top of the list
           return -1;
         } else if (b[0] === value) {
           return 1;
@@ -238,6 +242,7 @@ class LanguageDropdown extends PureComponent {
   static propTypes = {
     value: PropTypes.string,
     frequentlyUsedLanguages: PropTypes.arrayOf(PropTypes.string),
+    guess: PropTypes.string,
     intl: PropTypes.object.isRequired,
     onChange: PropTypes.func,
   };
@@ -281,7 +286,7 @@ class LanguageDropdown extends PureComponent {
   };
 
   render () {
-    const { value, intl, frequentlyUsedLanguages } = this.props;
+    const { value, guess, intl, frequentlyUsedLanguages } = this.props;
     const { open, placement } = this.state;
     const current = preloadedLanguages.find(lang => lang[0] === value) ?? [];
 
@@ -294,7 +299,7 @@ class LanguageDropdown extends PureComponent {
           onClick={this.handleToggle}
           onMouseDown={this.handleMouseDown}
           onKeyDown={this.handleButtonKeyDown}
-          className={classNames('dropdown-button', { active: open })}
+          className={classNames('dropdown-button', { active: open, warning: guess !== '' && guess !== value })}
         >
           <Icon icon={TranslateIcon} />
           <span className='dropdown-button__label'>{current[2] ?? value}</span>
@@ -306,6 +311,7 @@ class LanguageDropdown extends PureComponent {
               <div className={`dropdown-animation language-dropdown__dropdown ${placement}`} >
                 <LanguageDropdownMenu
                   value={value}
+                  guess={guess}
                   frequentlyUsedLanguages={frequentlyUsedLanguages}
                   onClose={this.handleClose}
                   onChange={this.handleChange}

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

@@ -4,16 +4,16 @@ import { FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
 
+import type { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 
 import CloseIcon from '@/material-icons/400-20px/close.svg?react';
 import EditIcon from '@/material-icons/400-24px/edit.svg?react';
 import WarningIcon from '@/material-icons/400-24px/warning.svg?react';
-import {
-  undoUploadCompose,
-  initMediaEditModal,
-} from 'mastodon/actions/compose';
+import { undoUploadCompose } from 'mastodon/actions/compose';
+import { openModal } from 'mastodon/actions/modal';
 import { Blurhash } from 'mastodon/components/blurhash';
 import { Icon } from 'mastodon/components/icon';
 import type { MediaAttachment } from 'mastodon/models/media_attachment';
@@ -27,16 +27,15 @@ export const Upload: React.FC<{
   wide?: boolean;
 }> = ({ id, dragging, overlay, tall, wide }) => {
   const dispatch = useAppDispatch();
-  const media = useAppSelector(
-    (state) =>
-      state.compose // eslint-disable-line @typescript-eslint/no-unsafe-call
-        .get('media_attachments') // eslint-disable-line @typescript-eslint/no-unsafe-member-access
-        .find((item: MediaAttachment) => item.get('id') === id) as  // eslint-disable-line @typescript-eslint/no-unsafe-member-access
-        | MediaAttachment
-        | undefined,
+  const media = useAppSelector((state) =>
+    (
+      (state.compose as ImmutableMap<string, unknown>).get(
+        'media_attachments',
+      ) as ImmutableList<MediaAttachment>
+    ).find((item) => item.get('id') === id),
   );
   const sensitive = useAppSelector(
-    (state) => state.compose.get('spoiler') as boolean, // eslint-disable-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+    (state) => state.compose.get('spoiler') as boolean,
   );
 
   const handleUndoClick = useCallback(() => {
@@ -44,7 +43,9 @@ export const Upload: React.FC<{
   }, [dispatch, id]);
 
   const handleFocalPointClick = useCallback(() => {
-    dispatch(initMediaEditModal(id));
+    dispatch(
+      openModal({ modalType: 'FOCAL_POINT', modalProps: { mediaId: id } }),
+    );
   }, [dispatch, id]);
 
   const { attributes, listeners, setNodeRef, transform, transition } =

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

@@ -2,7 +2,11 @@ import { useState, useCallback, useMemo } from 'react';
 
 import { useIntl, defineMessages } from 'react-intl';
 
-import type { List } from 'immutable';
+import type {
+  List,
+  Map as ImmutableMap,
+  List as ImmutableList,
+} from 'immutable';
 
 import type {
   DragStartEvent,
@@ -63,18 +67,20 @@ export const UploadForm: React.FC = () => {
   const intl = useIntl();
   const mediaIds = useAppSelector(
     (state) =>
-      state.compose // eslint-disable-line @typescript-eslint/no-unsafe-call
-        .get('media_attachments') // eslint-disable-line @typescript-eslint/no-unsafe-member-access
-        .map((item: MediaAttachment) => item.get('id')) as List<string>, // eslint-disable-line @typescript-eslint/no-unsafe-member-access
+      (
+        (state.compose as ImmutableMap<string, unknown>).get(
+          'media_attachments',
+        ) as ImmutableList<MediaAttachment>
+      ).map((item: MediaAttachment) => item.get('id')) as List<string>,
   );
   const active = useAppSelector(
-    (state) => state.compose.get('is_uploading') as boolean, // eslint-disable-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+    (state) => state.compose.get('is_uploading') as boolean,
   );
   const progress = useAppSelector(
-    (state) => state.compose.get('progress') as number, // eslint-disable-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+    (state) => state.compose.get('progress') as number,
   );
   const isProcessing = useAppSelector(
-    (state) => state.compose.get('is_processing') as boolean, // eslint-disable-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+    (state) => state.compose.get('is_processing') as boolean,
   );
   const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
   const sensors = useSensors(

app/javascript/mastodon/features/compose/containers/language_dropdown_container.js

@@ -2,6 +2,8 @@ import { createSelector } from '@reduxjs/toolkit';
 import { Map as ImmutableMap } from 'immutable';
 import { connect } from 'react-redux';
 
+import lande from 'lande';
+import { debounce } from 'lodash';
 
 import { changeComposeLanguage } from 'mastodon/actions/compose';
 
@@ -16,9 +18,83 @@ const getFrequentlyUsedLanguages = createSelector([
     .toArray()
 ));
 
+const ISO_639_MAP = {
+  afr: 'af', // Afrikaans
+  ara: 'ar', // Arabic
+  aze: 'az', // Azerbaijani
+  bel: 'be', // Belarusian
+  ben: 'bn', // Bengali
+  bul: 'bg', // Bulgarian
+  cat: 'ca', // Catalan
+  ces: 'cs', // Czech
+  ckb: 'ku', // Kurdish
+  cmn: 'zh', // Mandarin
+  dan: 'da', // Danish
+  deu: 'de', // German
+  ell: 'el', // Greek
+  eng: 'en', // English
+  est: 'et', // Estonian
+  eus: 'eu', // Basque
+  fin: 'fi', // Finnish
+  fra: 'fr', // French
+  hau: 'ha', // Hausa
+  heb: 'he', // Hebrew
+  hin: 'hi', // Hindi
+  hrv: 'hr', // Croatian
+  hun: 'hu', // Hungarian
+  hye: 'hy', // Armenian
+  ind: 'id', // Indonesian
+  isl: 'is', // Icelandic
+  ita: 'it', // Italian
+  jpn: 'ja', // Japanese
+  kat: 'ka', // Georgian
+  kaz: 'kk', // Kazakh
+  kor: 'ko', // Korean
+  lit: 'lt', // Lithuanian
+  mar: 'mr', // Marathi
+  mkd: 'mk', // Macedonian
+  nld: 'nl', // Dutch
+  nob: 'no', // Norwegian
+  pes: 'fa', // Persian
+  pol: 'pl', // Polish
+  por: 'pt', // Portuguese
+  ron: 'ro', // Romanian
+  run: 'rn', // Rundi
+  rus: 'ru', // Russian
+  slk: 'sk', // Slovak
+  spa: 'es', // Spanish
+  srp: 'sr', // Serbian
+  swe: 'sv', // Swedish
+  tgl: 'tl', // Tagalog
+  tur: 'tr', // Turkish
+  ukr: 'uk', // Ukrainian
+  vie: 'vi', // Vietnamese
+};
+
+const debouncedLande = debounce((text) => lande(text), 500, { trailing: true });
+
+const detectedLanguage = createSelector([
+  state => state.getIn(['compose', 'text']),
+], text => {
+  if (text.length > 20) {
+    const guesses = debouncedLande(text);
+    if (!guesses)
+      return '';
+
+    const [lang, confidence] = guesses[0];
+
+    if (confidence > 0.8) {
+      return ISO_639_MAP[lang];
+    }
+  }
+
+  return '';
+});
+
 const mapStateToProps = state => ({
   frequentlyUsedLanguages: getFrequentlyUsedLanguages(state),
   value: state.getIn(['compose', 'language']),
+  guess: detectedLanguage(state),
 });
 
 const mapDispatchToProps = dispatch => ({