Merge pull request #990 from cheeaun/main

Update from main

README.md

@@ -305,6 +305,7 @@ Costs involved in running and developing this web app:
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/15460040/medium/1cfcfe5f5511b783b5d9f2b968bad819.png" alt="" width="16" height="16" /> cbasje (Dutch)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/15525631/medium/51293156034d0236f1a1020c10f7d539_default.png" alt="" width="16" height="16" /> cbo92 (French)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/15910131/medium/67fab7eeab5551853450e76e2ef19e59.jpeg" alt="" width="16" height="16" /> CDN (Chinese Simplified)
+- <img src="https://crowdin-static.downloads.crowdin.com/avatar/12513809/medium/b56324e44ae26da6db7793bc467a70e2.png" alt="" width="16" height="16" /> codl (French)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/16556801/medium/ed5e501ca1f3cc6525d2da28db646346.jpeg" alt="" width="16" height="16" /> dannypsnl (Chinese Traditional)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/3711/medium/c97239bb54623a50eb43cc6b801bb156.jpg" alt="" width="16" height="16" /> databio (Catalan)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/16533843/medium/ac7af8776858a992d992cf6702d1aaae.jpg" alt="" width="16" height="16" /> Dizro (Italian)
@@ -314,13 +315,13 @@ Costs involved in running and developing this web app:
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/16528627/medium/9036f6eced0257f4e1ea4c5bd499de2d_default.png" alt="" width="16" height="16" /> ElPamplina (Spanish)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/14277386/medium/29b30d2c73a214000e3941c9978f49e4_default.png" alt="" width="16" height="16" /> Fitik (Esperanto, Hebrew)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/14444512/medium/99d0e7a3076deccbdfe0aa0b0612308c.jpeg" alt="" width="16" height="16" /> Freeesia (Japanese)
-- <img src="https://crowdin-static.downloads.crowdin.com/avatar/12617257/medium/a201650da44fed28890b0e0d8477a663.jpg" alt="" width="16" height="16" /> ghose (Galician)
+- <img src="https://crowdin-static.downloads.crowdin.com/avatar/12617257/medium/7a0122f352a94d95be10780bb83f63ef.jpg" alt="" width="16" height="16" /> ghose (Galician)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/15248754/medium/0dac6334ea0f4e8d4194a605c0a5594a.jpeg" alt="" width="16" height="16" /> hongminhee (Korean)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/16529833/medium/2122d0c5d61c00786ab6d5e5672d4098.png" alt="" width="16" height="16" /> Hugoglyph (Esperanto, Spanish)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/13454728/medium/1f78b7124b3c962bc4ae55e8d701fc91_default.png" alt="" width="16" height="16" /> isard (Catalan)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/16646485/medium/5d76c44212a4048a815ab437fb170856_default.png" alt="" width="16" height="16" /> kaliuwu (Polish)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/16532403/medium/4cefb19623bcc44d7cdb9e25aebf5250.jpeg" alt="" width="16" height="16" /> karlafej (Czech)
-- <img src="https://crowdin-static.downloads.crowdin.com/avatar/15791971/medium/88bdda3090339f16f6083390d32bb434_default.png" alt="" width="16" height="16" /> katullo11 (Italian)
+- <img src="https://crowdin-static.downloads.crowdin.com/avatar/15791971/medium/1790a2101ceb13f61816b8fe6fbe6d90.jpeg" alt="" width="16" height="16" /> katullo11 (Italian)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/14677260/medium/e53420d200961f48602324e18c091bdc.png" alt="" width="16" height="16" /> Kytta (German)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/16529521/medium/ae6add93a901b0fefa2d9b1077920d73.png" alt="" width="16" height="16" /> llun (Thai)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/16291756/medium/c008af10bc117fa9c9dcb70f2b291ee6.jpg" alt="" width="16" height="16" /> lucasofchirst (Occitan, Portuguese, Portuguese, Brazilian)

package.json

@@ -16,15 +16,15 @@
     "readme:i18n-volunteers": "node scripts/update-i18n-volunteers-readme.js"
   },
   "dependencies": {
-    "@formatjs/intl-localematcher": "~0.5.8",
-    "@formatjs/intl-segmenter": "~11.7.4",
+    "@formatjs/intl-localematcher": "~0.5.9",
+    "@formatjs/intl-segmenter": "~11.7.7",
     "@formkit/auto-animate": "~0.8.2",
     "@github/text-expander-element": "~2.8.0",
     "@iconify-icons/mingcute": "~1.2.9",
     "@justinribeiro/lite-youtube": "~1.6.0",
-    "@lingui/detect-locale": "~4.14.0",
-    "@lingui/macro": "~4.14.0",
-    "@lingui/react": "~4.14.0",
+    "@lingui/detect-locale": "~5.1.2",
+    "@lingui/macro": "~5.1.2",
+    "@lingui/react": "~5.1.2",
     "@szhsin/react-menu": "~4.2.3",
     "chroma-js": "~3.1.2",
     "compare-versions": "~6.1.1",
@@ -40,11 +40,11 @@
     "masto": "~6.10.1",
     "moize": "~6.1.6",
     "p-retry": "~6.2.1",
-    "p-throttle": "~6.2.0",
-    "preact": "~10.24.3",
+    "p-throttle": "~7.0.0",
+    "preact": "~10.25.3",
     "punycode": "~2.3.1",
     "react-hotkeys-hook": "~4.6.1",
-    "react-intersection-observer": "~9.13.1",
+    "react-intersection-observer": "~9.14.0",
     "react-quick-pinch-zoom": "~5.1.0",
     "react-router-dom": "6.6.2",
     "string-length": "6.0.0",
@@ -59,20 +59,20 @@
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "~4.4.0",
-    "@lingui/cli": "~4.14.0",
-    "@lingui/vite-plugin": "~4.14.0",
-    "@preact/preset-vite": "~2.9.1",
+    "@lingui/cli": "~5.1.2",
+    "@lingui/vite-plugin": "~5.1.2",
+    "@preact/preset-vite": "~2.9.3",
     "babel-plugin-macros": "~3.1.0",
     "postcss": "~8.4.49",
     "postcss-dark-theme-class": "~1.3.0",
-    "postcss-preset-env": "~10.1.1",
-    "prettier": "3.4.1",
-    "sonda": "~0.6.1",
+    "postcss-preset-env": "~10.1.2",
+    "prettier": "3.4.2",
+    "sonda": "~0.6.2",
     "twitter-text": "~3.1.0",
-    "vite": "~5.4.11",
+    "vite": "~6.0.5",
     "vite-plugin-generate-file": "~0.2.0",
     "vite-plugin-html-config": "~2.0.2",
-    "vite-plugin-pwa": "~0.21.0",
+    "vite-plugin-pwa": "~0.21.1",
     "vite-plugin-remove-console": "~2.2.0",
     "vite-plugin-run": "~0.6.1",
     "workbox-cacheable-response": "~7.3.0",

src/components/account-block.jsx

@@ -1,6 +1,6 @@
 import './account-block.css';
 
-import { Plural, t, Trans } from '@lingui/macro';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
 
 // import { useNavigate } from 'react-router-dom';
 import enhanceContent from '../utils/enhance-content';
@@ -28,6 +28,7 @@ function AccountBlock({
   relationship = {},
   excludeRelationshipAttrs = [],
 }) {
+  const { t } = useLingui();
   if (skeleton) {
     return (
       <div class="account-block skeleton">

src/components/account-info.jsx

@@ -1,7 +1,7 @@
 import './account-info.css';
 
-import { msg, plural, t, Trans } from '@lingui/macro';
-import { useLingui } from '@lingui/react';
+import { msg, plural } from '@lingui/core/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { MenuDivider, MenuItem } from '@szhsin/react-menu';
 import {
   useCallback,
@@ -24,7 +24,7 @@ import pmem from '../utils/pmem';
 import shortenNumber from '../utils/shorten-number';
 import showCompose from '../utils/show-compose';
 import showToast from '../utils/show-toast';
-import states, { hideAllModals } from '../utils/states';
+import states from '../utils/states';
 import store from '../utils/store';
 import { getCurrentAccountID, updateAccount } from '../utils/store-utils';
 import supports from '../utils/supports';
@@ -135,7 +135,7 @@ function AccountInfo({
   instance,
   authenticated,
 }) {
-  const { i18n } = useLingui();
+  const { i18n, t } = useLingui();
   const { masto } = api({
     instance,
   });
@@ -941,7 +941,7 @@ function RelatedActions({
   onProfileUpdate = () => {},
 }) {
   if (!info) return null;
-  const { _ } = useLingui();
+  const { _, t } = useLingui();
   const {
     masto: currentMasto,
     instance: currentInstance,
@@ -1793,6 +1793,7 @@ function niceAccountURL(url) {
 }
 
 function TranslatedBioSheet({ note, fields, onClose }) {
+  const { t } = useLingui();
   const fieldsText =
     fields
       ?.map(({ name, value }) => `${name}\n${getHTMLText(value)}`)
@@ -1827,6 +1828,7 @@ function TranslatedBioSheet({ note, fields, onClose }) {
 }
 
 function AddRemoveListsSheet({ accountID, onClose }) {
+  const { t } = useLingui();
   const { masto } = api();
   const [uiState, setUIState] = useState('default');
   const [lists, setLists] = useState([]);
@@ -1971,6 +1973,7 @@ function PrivateNoteSheet({
   onRelationshipChange = () => {},
   onClose = () => {},
 }) {
+  const { t } = useLingui();
   const { masto } = api();
   const [uiState, setUIState] = useState('default');
   const textareaRef = useRef(null);
@@ -2065,6 +2068,7 @@ function PrivateNoteSheet({
 }
 
 function EditProfileSheet({ onClose = () => {} }) {
+  const { t } = useLingui();
   const { masto } = api();
   const [uiState, setUIState] = useState('loading');
   const [account, setAccount] = useState(null);

src/components/account-sheet.jsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { useLingui } from '@lingui/react/macro';
 import { useEffect } from 'preact/hooks';
 
 import { api } from '../utils/api';
@@ -9,6 +9,7 @@ import AccountInfo from './account-info';
 import Icon from './icon';
 
 function AccountSheet({ account, instance: propInstance, onClose }) {
+  const { t } = useLingui();
   const { masto, instance, authenticated } = api({ instance: propInstance });
   const isString = typeof account === 'string';
 

src/components/background-service.jsx

@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react/macro';
 import { memo } from 'preact/compat';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -13,6 +13,8 @@ const STREAMING_TIMEOUT = 1000 * 3; // 3 seconds
 const POLL_INTERVAL = 20_000; // 20 seconds
 
 export default memo(function BackgroundService({ isLoggedIn }) {
+  const { t } = useLingui();
+
   // Notifications service
   // - WebSocket to receive notifications when page is visible
   const [visible, setVisible] = useState(true);

src/components/columns.jsx

@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react/macro';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useSnapshot } from 'valtio';
 
@@ -23,6 +23,7 @@ const scrollIntoViewOptions = {
 };
 
 function Columns() {
+  const { t } = useLingui();
   useTitle(t`Home`, '/');
   const snapStates = useSnapshot(states);
   const { shortcuts } = snapStates;

src/components/compose-button.jsx

@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react/macro';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useSnapshot } from 'valtio';
 
@@ -9,6 +9,7 @@ import states from '../utils/states';
 import Icon from './icon';
 
 export default function ComposeButton() {
+  const { t } = useLingui();
   const snapStates = useSnapshot(states);
 
   function handleButton(e) {

src/components/compose.jsx

@@ -1,8 +1,8 @@
 import './compose.css';
 import '@github/text-expander-element';
 
-import { msg, plural, t, Trans } from '@lingui/macro';
-import { useLingui } from '@lingui/react';
+import { msg, plural } from '@lingui/core/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { MenuItem } from '@szhsin/react-menu';
 import { deepEqual } from 'fast-equals';
 import Fuse from 'fuse.js';
@@ -217,7 +217,7 @@ function Compose({
   standalone,
   hasOpener,
 }) {
-  const { i18n, _ } = useLingui();
+  const { i18n, _, t } = useLingui();
   const rtf = RTF(i18n.locale);
   const lf = LF(i18n.locale);
 
@@ -1813,6 +1813,7 @@ const detectLangs = async (text) => {
 };
 
 const Textarea = forwardRef((props, ref) => {
+  const { t } = useLingui();
   const { masto, instance } = api();
   const [text, setText] = useState(ref.current?.value || '');
   const {
@@ -1839,8 +1840,13 @@ const Textarea = forwardRef((props, ref) => {
 
   const textExpanderRef = useRef();
   const textExpanderTextRef = useRef('');
+  const hasTextExpanderRef = useRef(false);
   useEffect(() => {
-    let handleChange, handleValue, handleCommited;
+    let handleChange,
+      handleValue,
+      handleCommited,
+      handleActivate,
+      handleDeactivate;
     if (textExpanderRef.current) {
       handleChange = (e) => {
         // console.log('text-expander-change', e);
@@ -2021,6 +2027,24 @@ const Textarea = forwardRef((props, ref) => {
         'text-expander-committed',
         handleCommited,
       );
+
+      handleActivate = () => {
+        hasTextExpanderRef.current = true;
+      };
+
+      textExpanderRef.current.addEventListener(
+        'text-expander-activate',
+        handleActivate,
+      );
+
+      handleDeactivate = () => {
+        hasTextExpanderRef.current = false;
+      };
+
+      textExpanderRef.current.addEventListener(
+        'text-expander-deactivate',
+        handleDeactivate,
+      );
     }
 
     return () => {
@@ -2037,6 +2061,14 @@ const Textarea = forwardRef((props, ref) => {
           'text-expander-committed',
           handleCommited,
         );
+        textExpanderRef.current.removeEventListener(
+          'text-expander-activate',
+          handleActivate,
+        );
+        textExpanderRef.current.removeEventListener(
+          'text-expander-deactivate',
+          handleDeactivate,
+        );
       }
     };
   }, []);
@@ -2126,7 +2158,8 @@ const Textarea = forwardRef((props, ref) => {
         onKeyDown={(e) => {
           // Get line before cursor position after pressing 'Enter'
           const { key, target } = e;
-          if (key === 'Enter' && !(e.ctrlKey || e.metaKey)) {
+          const hasTextExpander = hasTextExpanderRef.current;
+          if (key === 'Enter' && !(e.ctrlKey || e.metaKey || hasTextExpander)) {
             try {
               const { value, selectionStart } = target;
               const textBeforeCursor = value.slice(0, selectionStart);
@@ -2244,7 +2277,7 @@ function MediaAttachment({
   onDescriptionChange = () => {},
   onRemove = () => {},
 }) {
-  const { i18n } = useLingui();
+  const { i18n, t } = useLingui();
   const [uiState, setUIState] = useState('default');
   const supportsEdit = supports('@mastodon/edit-media-attributes');
   const { type, id, file } = attachment;
@@ -2725,7 +2758,7 @@ function Poll({
   minExpiration,
   maxCharactersPerOption,
 }) {
-  const { _ } = useLingui();
+  const { t } = useLingui();
   const { options, expiresIn, multiple } = poll;
 
   return (
@@ -2880,6 +2913,7 @@ function MentionModal({
   onSelect = () => {},
   defaultSearchTerm,
 }) {
+  const { t } = useLingui();
   const { masto } = api();
   const [uiState, setUIState] = useState('default');
   const [accounts, setAccounts] = useState([]);
@@ -3104,6 +3138,7 @@ function CustomEmojisModal({
   onSelect = () => {},
   defaultSearchTerm,
 }) {
+  const { t } = useLingui();
   const [uiState, setUIState] = useState('default');
   const customEmojisList = useRef([]);
   const [customEmojis, setCustomEmojis] = useState([]);
@@ -3399,7 +3434,7 @@ const CustomEmojiButton = memo(({ emoji, onClick, showCode }) => {
 
 const GIFS_PER_PAGE = 20;
 function GIFPickerModal({ onClose = () => {}, onSelect = () => {} }) {
-  const { i18n } = useLingui();
+  const { i18n, t } = useLingui();
   const [uiState, setUIState] = useState('default');
   const [results, setResults] = useState([]);
   const formRef = useRef(null);

src/components/drafts.jsx

@@ -1,6 +1,6 @@
 import './drafts.css';
 
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useEffect, useMemo, useReducer, useState } from 'react';
 
 import { api } from '../utils/api';
@@ -14,6 +14,7 @@ import Loader from './loader';
 import MenuConfirm from './menu-confirm';
 
 function Drafts({ onClose }) {
+  const { t } = useLingui();
   const { masto } = api();
   const [uiState, setUIState] = useState('default');
   const [drafts, setDrafts] = useState([]);
@@ -215,6 +216,7 @@ function Drafts({ onClose }) {
 }
 
 function MiniDraft({ draft }) {
+  const { t } = useLingui();
   const { draftStatus, replyTo } = draft;
   const { status, spoilerText, poll, mediaAttachments } = draftStatus;
   const hasPoll = poll?.options?.length > 0;