Merge c1d09c8d6e into 14cb5ff881

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

app/javascript/mastodon/components/button/button.stories.tsx

@@ -8,6 +8,7 @@ const meta = {
   component: Button,
   args: {
     secondary: false,
+    plain: false,
     compact: false,
     dangerous: false,
     disabled: false,
@@ -57,6 +58,14 @@ export const Secondary: Story = {
   play: buttonTest,
 };
 
+export const Plain: Story = {
+  args: {
+    plain: true,
+    children: 'Plain button',
+  },
+  play: buttonTest,
+};
+
 export const Compact: Story = {
   args: {
     compact: true,
@@ -101,6 +110,14 @@ export const SecondaryDisabled: Story = {
   play: disabledButtonTest,
 };
 
+export const PlainDisabled: Story = {
+  args: {
+    ...Plain.args,
+    disabled: true,
+  },
+  play: disabledButtonTest,
+};
+
 const loadingButtonTest: Story['play'] = async ({
   args,
   canvas,

app/javascript/mastodon/components/button/index.tsx

@@ -9,6 +9,7 @@ interface BaseProps
   extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
   block?: boolean;
   secondary?: boolean;
+  plain?: boolean;
   compact?: boolean;
   dangerous?: boolean;
   loading?: boolean;
@@ -35,6 +36,7 @@ export const Button: React.FC<Props> = ({
   disabled,
   block,
   secondary,
+  plain,
   compact,
   dangerous,
   loading,
@@ -62,6 +64,7 @@ export const Button: React.FC<Props> = ({
     <button
       className={classNames('button', className, {
         'button-secondary': secondary,
+        'button--plain': plain,
         'button--compact': compact,
         'button--block': block,
         'button--dangerous': dangerous,

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

@@ -20,7 +20,7 @@ import { languages as preloadedLanguages } from 'mastodon/initial_state';
 import type { RootState } from 'mastodon/store';
 import { useAppSelector, useAppDispatch } from 'mastodon/store';
 
-import { debouncedGuess } from '../util/language_detection';
+import { debouncedGuess, countLetters } from '../util/language_detection';
 
 const messages = defineMessages({
   changeLanguage: {
@@ -375,12 +375,25 @@ export const LanguageDropdown: React.FC = () => {
   );
 
   useEffect(() => {
-    if (text.length > 20) {
-      debouncedGuess(text, setGuess);
+    let canceled = false;
+
+    if (countLetters(text) >= 5) {
+      debouncedGuess(text)
+        .then((lang) => {
+          if (!canceled) {
+            setGuess(lang ?? '');
+          }
+        })
+        .catch(() => {
+          setGuess('');
+        });
     } else {
-      debouncedGuess.cancel();
       setGuess('');
     }
+
+    return () => {
+      canceled = true;
+    };
   }, [text, setGuess]);
 
   return (

app/javascript/mastodon/features/compose/util/language_detection.d.ts

@@ -0,0 +1,5 @@
+export declare const debouncedGuess: (
+  text: string,
+) => Promise<string | undefined>;
+
+export declare const countLetters: (text: string) => number;

app/javascript/mastodon/features/compose/util/language_detection.js

@@ -1,7 +1,5 @@
-import lande from 'lande';
-import { debounce } from 'lodash';
-
-import { urlRegex } from './url_regex';
+const languageDetectorInGlobalThis = 'LanguageDetector' in globalThis;
+let languageDetectorSupportedAndReady = languageDetectorInGlobalThis && await globalThis.LanguageDetector.availability() === 'available';
 
 const ISO_639_MAP = {
   afr: 'af', // Afrikaans
@@ -56,21 +54,23 @@ const ISO_639_MAP = {
   vie: 'vi', // Vietnamese
 };
 
-const guessLanguage = (text) => {
-  text = text
-    .replace(urlRegex, '')
-    .replace(/(^|[^/\w])@(([a-z0-9_]+)@[a-z0-9.-]+[a-z0-9]+)/ig, '');
-
-  if (text.length > 20) {
-    const [lang, confidence] = lande(text)[0];
-  
-    if (confidence > 0.8)
-      return ISO_639_MAP[lang];
-  }
-
-  return '';
+const countLetters = (text) => {
+  const segmenter = new Intl.Segmenter('und', { granularity: 'grapheme' })
+  const letters = [...segmenter.segment(text)]
+  return letters.length
 };
 
-export const debouncedGuess = debounce((text, setGuess) => {
-  setGuess(guessLanguage(text));
-}, 500, { maxWait: 1500, leading: true, trailing: true });
+let module;
+// If the API is supported, but the model not loaded yet…
+if (languageDetectorInGlobalThis) {
+  if (!languageDetectorSupportedAndReady) {
+    // …trigger the model download
+    globalThis.LanguageDetector.create();
+  }
+  module = await import('./language_detection_with_languagedetector');
+} else {
+  module = await import('./language_detection_with_lande');
+}
+const debouncedGuess = module.debouncedGuess;
+
+export { debouncedGuess, countLetters, ISO_639_MAP };

app/javascript/mastodon/features/compose/util/language_detection_with_lande.js

@@ -0,0 +1,38 @@
+import lande from 'lande';
+import { debounce } from 'lodash';
+
+import { countLetters, ISO_639_MAP } from './language_detection';
+import { urlRegex } from './url_regex';
+
+const guessLanguage = (text) => {
+  text = text
+    .replace(urlRegex, '')
+    .replace(/(^|[^/\w])@(([a-z0-9_]+)@[a-z0-9.-]+[a-z0-9]+)/ig, '');
+
+  if (countLetters(text) > 20) {
+    const [lang, confidence] = lande(text)[0];
+    if (confidence > 0.8)
+      return ISO_639_MAP[lang];
+  }
+
+  return '';
+};
+
+const debouncedGuess = (() => {
+  let resolver = null;
+
+  const debounced = debounce((text) => {
+    const result = guessLanguage(text);
+    if (resolver) {
+      resolver(result);
+      resolver = null;
+    }
+  }, 500, { maxWait: 1500, leading: true, trailing: true });
+
+  return (text) => new Promise((resolve) => {
+    resolver = resolve;
+    debounced(text);
+  });
+})();
+
+export { debouncedGuess };

app/javascript/mastodon/features/compose/util/language_detection_with_languagedetector.js

@@ -0,0 +1,41 @@
+import { debounce } from 'lodash';
+
+import { urlRegex } from './url_regex';
+
+const guessLanguage = async (text) => {
+  text = text
+    .replace(urlRegex, '')
+    .replace(/(^|[^/\w])@(([a-z0-9_]+)@[a-z0-9.-]+[a-z0-9]+)/ig, '');
+
+  try {
+    const languageDetector = await globalThis.LanguageDetector.create();
+    let {detectedLanguage, confidence} = (await languageDetector.detect(text))[0];
+    if (confidence > 0.8) {
+      detectedLanguage = detectedLanguage.split('-')[0];
+      return detectedLanguage;
+    }
+  } catch {
+    return '';
+  }
+
+  return '';
+};
+
+const debouncedGuess = (() => {
+  let resolver = null;
+
+  const debounced = debounce((text) => {
+    const result = guessLanguage(text);
+    if (resolver) {
+      resolver(result);
+      resolver = null;
+    }
+  }, 500, { maxWait: 1500, leading: true, trailing: true });
+
+  return (text) => new Promise((resolve) => {
+    resolver = resolve;
+    debounced(text);
+  });
+})();
+
+export { debouncedGuess };

app/javascript/styles/mastodon/components.scss

@@ -201,6 +201,41 @@
     }
   }
 
+  &.button--plain {
+    color: $highlight-text-color;
+    background: transparent;
+    padding: 6px;
+
+    // The button has no outline, so we use negative margin to
+    // visually align its label with its surroundings while maintaining
+    // a generous click target
+    margin-inline: -6px;
+    border: 1px solid transparent;
+
+    &:active,
+    &:focus,
+    &:hover {
+      border-color: transparent;
+      color: lighten($highlight-text-color, 4%);
+      background-color: transparent;
+      text-decoration: none;
+    }
+
+    &:disabled,
+    &.disabled {
+      opacity: 0.7;
+      border-color: transparent;
+      color: $ui-button-disabled-color;
+
+      &:active,
+      &:focus,
+      &:hover {
+        border-color: transparent;
+        color: $ui-button-disabled-color;
+      }
+    }
+  }
+
   &.button-tertiary {
     background: transparent;
     padding: 6px 17px;

app/serializers/activitypub/note_serializer.rb

@@ -232,6 +232,15 @@ class ActivityPub::NoteSerializer < ActivityPub::Serializer
       canQuote: {
         automaticApproval: approved_uris,
       },
+      canReply: {
+        always: 'https://www.w3.org/ns/activitystreams#Public',
+      },
+      canLike: {
+        always: 'https://www.w3.org/ns/activitystreams#Public',
+      },
+      canAnnounce: {
+        always: 'https://www.w3.org/ns/activitystreams#Public',
+      },
     }
   end
 

yarn.lock

@@ -11957,8 +11957,8 @@ __metadata:
   linkType: hard
 
 "sass@npm:^1.62.1":
-  version: 1.91.0
-  resolution: "sass@npm:1.91.0"
+  version: 1.92.0
+  resolution: "sass@npm:1.92.0"
   dependencies:
     "@parcel/watcher": "npm:^2.4.1"
     chokidar: "npm:^4.0.0"
@@ -11969,7 +11969,7 @@ __metadata:
       optional: true
   bin:
     sass: sass.js
-  checksum: 10c0/5be1c98f7a618cb5f90b62f63d2aa0f78f9bf369c93ec7cd9880752a26b0ead19aa63cc341e8a26ce6c74d080baa5705f1685dff52fe6a3f28a7828ae50182b6
+  checksum: 10c0/bdff9fa6988620e2a81962efdd016e3894d19934cfadc105cf41db767f59dd47afd8ff32840e612ef700cb67e19d9e83c108f1724eb8f0bef56c4877dbe6f14d
   languageName: node
   linkType: hard