Merge branch 'main' into feature/markdown

README.md

@@ -97,7 +97,7 @@ Everything is designed and engineered following my taste and vision. This is a p
 
 ## Development
 
-Prerequisites: Node.js 18+
+Prerequisites: Node.js 20+
 
 - `npm install` - Install dependencies
 - `npm run dev` - Start development server and `messages:extract` (`clean` + ``watch`) in parallel
@@ -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)
@@ -350,6 +351,7 @@ Costs involved in running and developing this web app:
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/16530049/medium/683f3581620c6b4a5c753b416ed695a7.jpeg" alt="" width="16" height="16" /> tferrermo (Spanish)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/15752199/medium/7e9efd828c4691368d063b19d19eb894.png" alt="" width="16" height="16" /> tkbremnes (Norwegian Bokmal)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/16527851/medium/649e5a9a8a8cc61ced670d89e9cca082.png" alt="" width="16" height="16" /> tux93 (German)
+- <img src="https://crowdin-static.downloads.crowdin.com/avatar/16791511/medium/321c72613cd27efc3005e7c3bf383578.jpeg" alt="" width="16" height="16" /> uzaylul (Turkish)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/14427566/medium/ab733b5044c21867fc5a9d1b22cd2c03.png" alt="" width="16" height="16" /> Vac31. (Lithuanian)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/16026914/medium/e3ca187f354a298ef0c9d02a0ed17be7.jpg" alt="" width="16" height="16" /> valtlai (Finnish)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/16608515/medium/85506c21dce8df07843ca11908ee3951.jpeg" alt="" width="16" height="16" /> vasiriri (Polish)

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-localematcher": "~0.5.9",
-    "@formatjs/intl-segmenter": "~11.7.4",
+    "@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/detect-locale": "~5.1.2",
-    "@lingui/macro": "~4.14.0",
+    "@lingui/macro": "~5.1.2",
-    "@lingui/react": "~4.14.0",
+    "@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",
+    "p-throttle": "~7.0.0",
-    "preact": "~10.24.3",
+    "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/cli": "~5.1.2",
-    "@lingui/vite-plugin": "~4.14.0",
+    "@lingui/vite-plugin": "~5.1.2",
-    "@preact/preset-vite": "~2.9.1",
+    "@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",
+    "postcss-preset-env": "~10.1.2",
-    "prettier": "3.4.1",
+    "prettier": "3.4.2",
-    "sonda": "~0.6.1",
+    "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 { msg, plural } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
+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,7 @@
 import './compose.css';
 import '@github/text-expander-element';
-
+import { msg, plural, t } from '@lingui/core/macro';
-import { plural, t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
-import { useLingui } from '@lingui/react';
 import { MenuItem } from '@szhsin/react-menu';
 import { deepEqual } from 'fast-equals';
 import Fuse from 'fuse.js';
@@ -224,7 +223,7 @@ function Compose({
   standalone,
   hasOpener,
 }) {
-  const { i18n, _ } = useLingui();
+  const { i18n, _, t } = useLingui();
   const rtf = RTF(i18n.locale);
   const lf = LF(i18n.locale);
 
@@ -1868,6 +1867,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 {
@@ -1894,8 +1894,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);
@@ -2076,6 +2081,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 () => {
@@ -2092,6 +2115,14 @@ const Textarea = forwardRef((props, ref) => {
           'text-expander-committed',
           handleCommited,
         );
+        textExpanderRef.current.removeEventListener(
+          'text-expander-activate',
+          handleActivate,
+        );
+        textExpanderRef.current.removeEventListener(
+          'text-expander-deactivate',
+          handleDeactivate,
+        );
       }
     };
   }, []);
@@ -2181,7 +2212,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);
@@ -2299,7 +2331,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;
@@ -2780,7 +2812,7 @@ function Poll({
   minExpiration,
   maxCharactersPerOption,
 }) {
-  const { _ } = useLingui();
+  const { t } = useLingui();
   const { options, expiresIn, multiple } = poll;
 
   return (
@@ -2935,6 +2967,7 @@ function MentionModal({
   onSelect = () => {},
   defaultSearchTerm,
 }) {
+  const { t } = useLingui();
   const { masto } = api();
   const [uiState, setUIState] = useState('default');
   const [accounts, setAccounts] = useState([]);
@@ -3159,6 +3192,7 @@ function CustomEmojisModal({
   onSelect = () => {},
   defaultSearchTerm,
 }) {
+  const { t } = useLingui();
   const [uiState, setUIState] = useState('default');
   const customEmojisList = useRef([]);
   const [customEmojis, setCustomEmojis] = useState([]);
@@ -3454,7 +3488,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;

src/components/embed-modal.jsx

@@ -1,10 +1,11 @@
 import './embed-modal.css';
 
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 
 import Icon from './icon';
 
 function EmbedModal({ html, url, width, height, onClose = () => {} }) {
+  const { t } = useLingui();
   return (
     <div class="embed-modal-container">
       <div class="top-controls">

src/components/follow-request-buttons.jsx

@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useState } from 'preact/hooks';
 
 import { api } from '../utils/api';
@@ -7,6 +7,7 @@ import Icon from './icon';
 import Loader from './loader';
 
 function FollowRequestButtons({ accountID, onChange }) {
+  const { t } = useLingui();
   const { masto } = api();
   const [uiState, setUIState] = useState('default');
   const [requestState, setRequestState] = useState(null); // accept, reject

src/components/generic-accounts.jsx

@@ -1,6 +1,6 @@
 import './generic-accounts.css';
 
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { InView } from 'react-intersection-observer';
 import { useSnapshot } from 'valtio';
@@ -21,8 +21,9 @@ export default function GenericAccounts({
   excludeRelationshipAttrs = [],
   postID,
   onClose = () => {},
-  blankCopy = t`Nothing to show`,
+  blankCopy,
 }) {
+  const { t } = useLingui();
   const { masto, instance: currentInstance } = api();
   const isCurrentInstance = instance ? instance === currentInstance : true;
   const snapStates = useSnapshot(states);
@@ -227,7 +228,9 @@ export default function GenericAccounts({
             <Trans>Error loading accounts</Trans>
           </p>
         ) : (
-          <p class="ui-state insignificant">{blankCopy}</p>
+          <p class="ui-state insignificant">
+            {blankCopy || t`Nothing to show`}
+          </p>
         )}
       </main>
     </div>

src/components/keyboard-shortcuts-help.jsx

@@ -1,6 +1,6 @@
 import './keyboard-shortcuts-help.css';
 
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { memo } from 'preact/compat';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useSnapshot } from 'valtio';
@@ -11,6 +11,7 @@ import Icon from './icon';
 import Modal from './modal';
 
 export default memo(function KeyboardShortcutsHelp() {
+  const { t } = useLingui();
   const snapStates = useSnapshot(states);
 
   function onClose() {

src/components/list-add-edit.jsx

@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
 import { api } from '../utils/api';
@@ -9,6 +9,7 @@ import Icon from './icon';
 import MenuConfirm from './menu-confirm';
 
 function ListAddEdit({ list, onClose }) {
+  const { t } = useLingui();
   const { masto } = api();
   const [uiState, setUIState] = useState('default');
   const editMode = !!list;

src/components/media-alt-modal.jsx

@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { Menu, MenuItem } from '@szhsin/react-menu';
 import { useState } from 'preact/hooks';
 import { useSnapshot } from 'valtio';
@@ -13,6 +13,7 @@ import Menu2 from './menu2';
 import TranslationBlock from './translation-block';
 
 export default function MediaAltModal({ alt, lang, onClose }) {
+  const { t } = useLingui();
   const snapStates = useSnapshot(states);
   const [forceTranslate, setForceTranslate] = useState(false);
   const targetLanguage = getTranslateTargetLanguage(true);

src/components/media-modal.jsx

@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { MenuDivider, MenuItem } from '@szhsin/react-menu';
 import { getBlurHashAverageColor } from 'fast-blurhash';
 import {
@@ -32,6 +32,7 @@ function MediaModal({
   index = 0,
   onClose = () => {},
 }) {
+  const { t } = useLingui();
   const [uiState, setUIState] = useState('default');
   const carouselRef = useRef(null);
 

src/components/media-post.jsx

@@ -1,6 +1,6 @@
 import './media-post.css';
 
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { memo } from 'preact/compat';
 import { useContext, useMemo } from 'preact/hooks';
 import { useSnapshot } from 'valtio';
@@ -22,6 +22,7 @@ function MediaPost({
   // allowFilters,
   onMediaClick,
 }) {
+  const { t } = useLingui();
   let sKey = statusKey(statusID, instance);
   const snapStates = useSnapshot(states);
   if (!status) {

src/components/media.jsx

@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react/macro';
 import { getBlurHashAverageColor } from 'fast-blurhash';
 import { Fragment } from 'preact';
 import { memo } from 'preact/compat';
@@ -32,6 +32,7 @@ audio = Audio track
 
 const dataAltLabel = 'ALT';
 const AltBadge = (props) => {
+  const { t } = useLingui();
   const { alt, lang, index, ...rest } = props;
   if (!alt || !alt.trim()) return null;
   return (

src/components/modals.jsx

@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react/macro';
 import { useEffect } from 'preact/hooks';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { subscribe, useSnapshot } from 'valtio';
@@ -30,6 +30,7 @@ subscribe(states, (changes) => {
 });
 
 export default function Modals() {
+  const { t } = useLingui();
   const snapStates = useSnapshot(states);
   const navigate = useNavigate();
   const location = useLocation();

src/components/nav-menu.jsx

@@ -1,6 +1,6 @@
 import './nav-menu.css';
 
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { ControlledMenu, MenuDivider, MenuItem } from '@szhsin/react-menu';
 import { memo } from 'preact/compat';
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
@@ -21,6 +21,7 @@ import MenuLink from './menu-link';
 import SubMenu2 from './submenu2';
 
 function NavMenu(props) {
+  const { t } = useLingui();
   const snapStates = useSnapshot(states);
   const { masto, instance, authenticated } = api();
 

src/components/notification-service.jsx

@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { memo } from 'preact/compat';
 import { useLayoutEffect, useState } from 'preact/hooks';
 import { useSnapshot } from 'valtio';
@@ -33,6 +33,7 @@ import Notification from './notification';
 }
 
 export default memo(function NotificationService() {
+  const { t } = useLingui();
   if (!('serviceWorker' in navigator)) return null;
 
   const snapStates = useSnapshot(states);

src/components/notification.jsx

@@ -1,5 +1,5 @@
-import { msg, Plural, Select, t, Trans } from '@lingui/macro';
+import { msg, t } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
+import { Plural, Select, Trans, useLingui } from '@lingui/react/macro';
 import { Fragment } from 'preact';
 import { memo } from 'preact/compat';
 

src/components/poll.jsx

@@ -1,4 +1,6 @@
-import { Plural, plural, t, Trans } from '@lingui/macro';
+import { i18n } from '@lingui/core';
+import { plural } from '@lingui/core/macro';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
 import { useState } from 'preact/hooks';
 
 import shortenNumber from '../utils/shorten-number';
@@ -14,6 +16,7 @@ export default function Poll({
   refresh = () => {},
   votePoll = () => {},
 }) {
+  const { t } = useLingui();
   const [uiState, setUIState] = useState('default');
   const {
     expired,

src/components/relative-time.jsx

@@ -1,5 +1,5 @@
 import { i18n } from '@lingui/core';
-import { t, Trans } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { useEffect, useMemo, useReducer } from 'preact/hooks';
 
 import localeMatch from '../utils/locale-match';

src/components/report-modal.jsx

@@ -1,7 +1,7 @@
 import './report-modal.css';
 
-import { msg, t, Trans } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { Fragment } from 'preact';
 import { useMemo, useRef, useState } from 'preact/hooks';
 
@@ -46,7 +46,7 @@ const CATEGORIES_INFO = {
 };
 
 function ReportModal({ account, post, onClose }) {
-  const { _ } = useLingui();
+  const { _, t } = useLingui();
   const { masto } = api();
   const [uiState, setUIState] = useState('default');
   const [username, domain] = account.acct.split('@');

src/components/search-form.jsx

@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { forwardRef } from 'preact/compat';
 import { useImperativeHandle, useRef, useState } from 'preact/hooks';
 import { useSearchParams } from 'react-router-dom';
@@ -9,6 +9,7 @@ import Icon from './icon';
 import Link from './link';
 
 const SearchForm = forwardRef((props, ref) => {
+  const { t } = useLingui();
   const { instance } = api();
   const [searchParams, setSearchParams] = useSearchParams();
   const [searchMenuOpen, setSearchMenuOpen] = useState(false);

src/components/shortcuts-settings.jsx

@@ -1,8 +1,8 @@
 import './shortcuts-settings.css';
 
 import { useAutoAnimate } from '@formkit/auto-animate/preact';
-import { msg, Plural, t, Trans } from '@lingui/macro';
+import { msg, t } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
 import {
   compressToEncodedURIComponent,
   decompressFromEncodedURIComponent,

src/components/shortcuts.jsx

@@ -1,7 +1,6 @@
 import './shortcuts.css';
 
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
-import { useLingui } from '@lingui/react';
 import { MenuDivider } from '@szhsin/react-menu';
 import { memo } from 'preact/compat';
 import { useRef, useState } from 'preact/hooks';
@@ -22,6 +21,7 @@ import Menu2 from './menu2';
 import SubMenu2 from './submenu2';
 
 function Shortcuts() {
+  const { t } = useLingui();
   const { _ } = useLingui();
   const { instance } = api();
   const snapStates = useSnapshot(states);

src/components/status.css

@@ -180,8 +180,11 @@
     color: var(--text-color);
     background-color: var(--bg-faded-color);
     border: 1px dashed var(--link-color);
-    box-shadow: 0 0 0 1px var(--bg-color), 0 -5px 10px var(--bg-color),
+    box-shadow:
-      0 -5px 15px var(--bg-color), 0 -5px 20px var(--bg-color);
+      0 0 0 1px var(--bg-color),
+      0 -5px 10px var(--bg-color),
+      0 -5px 15px var(--bg-color),
+      0 -5px 20px var(--bg-color);
     padding: 0.5em 0.75em;
     border-radius: 10em;
     font-size: 90%;
@@ -682,7 +685,8 @@
       .spoiler-media-button
     ),
   ~ .card .meta-container {
-    img {
+    img,
+    video {
       filter: invert(0.5);
       background-color: black;
     }
@@ -851,8 +855,11 @@
   border-radius: 10em;
   font-size: 90%;
   white-space: nowrap;
-  box-shadow: 0 0 0 1px var(--bg-color), 0 -5px 10px var(--bg-color),
+  box-shadow:
-    0 -5px 15px var(--bg-color), 0 -5px 20px var(--bg-color);
+    0 0 0 1px var(--bg-color),
+    0 -5px 10px var(--bg-color),
+    0 -5px 15px var(--bg-color),
+    0 -5px 20px var(--bg-color);
   transition: transform 0.5s ease-in-out;
 }
 .timeline-deck .status .content.truncated:hover:after {
@@ -2298,7 +2305,8 @@ a.card:is(:hover, :focus):visited {
 
       &,
       & .szh-menu__item {
-        box-shadow: inset 0 -2px 0 var(--checked-color),
+        box-shadow:
+          inset 0 -2px 0 var(--checked-color),
           inset 0 -16px 8px -16px var(--checked-color);
       }
       &:has(.szh-menu__item) {
@@ -2357,7 +2365,9 @@ a.card:is(:hover, :focus):visited {
   pointer-events: none;
   transform: translate3d(0, 6px, 0);
   transform-origin: var(--forward) center;
-  transition: all 0.15s ease-out 0.3s, border-color 0.3s ease-out;
+  transition:
+    all 0.15s ease-out 0.3s,
+    border-color 0.3s ease-out;
 
   .timeline.contextual .replies[data-comments-level='4'] & {
     top: 0;
@@ -2623,7 +2633,8 @@ a.card:is(:hover, :focus):visited {
     font-size: 0.9em;
     border: 2px dashed var(--link-light-color);
     border-radius: 8px;
-    box-shadow: 0 4px 8px -4px var(--drop-shadow-color),
+    box-shadow:
+      0 4px 8px -4px var(--drop-shadow-color),
       0 8px 32px -8px var(--drop-shadow-color);
     padding: 16px;
 
@@ -2731,8 +2742,11 @@ a.card:is(:hover, :focus):visited {
         color: var(--text-color);
         background-color: var(--bg-faded-color);
         border: 1px dashed var(--link-color);
-        box-shadow: 0 0 0 1px var(--bg-color), 0 -5px 10px var(--bg-color),
+        box-shadow:
-          0 -5px 15px var(--bg-color), 0 -5px 20px var(--bg-color);
+          0 0 0 1px var(--bg-color),
+          0 -5px 10px var(--bg-color),
+          0 -5px 15px var(--bg-color),
+          0 -5px 20px var(--bg-color);
         padding: 0.5em 0.75em;
         border-radius: 10em;
         font-size: 90%;

src/components/status.jsx

@@ -1,8 +1,8 @@
 import './status.css';
 import '@justinribeiro/lite-youtube';
 
-import { msg, plural, Plural, t, Trans } from '@lingui/macro';
+import { msg, plural } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
+import { Trans, useLingui } from '@lingui/react/macro';
 import {
   ControlledMenu,
   Menu,
@@ -308,7 +308,7 @@ function Status({
   showReplyParent,
   mediaFirst,
 }) {
-  const { _ } = useLingui();
+  const { _, t } = useLingui();
 
   if (skeleton) {
     return (
@@ -2967,6 +2967,7 @@ function EditedAtModal({
   fetchStatusHistory = () => {},
   onClose,
 }) {
+  const { t } = useLingui();
   const [uiState, setUIState] = useState('default');
   const [editHistory, setEditHistory] = useState([]);
 
@@ -3202,6 +3203,7 @@ function generateHTMLCode(post, instance, level = 0) {
 }
 
 function EmbedModal({ post, instance, onClose }) {
+  const { t } = useLingui();
   const {
     account: {
       url: accountURL,
@@ -3578,7 +3580,7 @@ function FilteredStatus({
   showFollowedTags,
   quoted,
 }) {
-  const { _ } = useLingui();
+  const { _, t } = useLingui();
   const snapStates = useSnapshot(states);
   const {
     id: statusID,

src/components/timeline.jsx

@@ -1,4 +1,5 @@
-import { plural, t, Trans } from '@lingui/macro';
+import { plural } from '@lingui/core/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { memo } from 'preact/compat';
 import {
   useCallback,
@@ -60,6 +61,7 @@ function Timeline({
   showReplyParent,
   clearWhenRefresh,
 }) {
+  const { t } = useLingui();
   const snapStates = useSnapshot(states);
   const [items, setItems] = useState([]);
   const [uiState, setUIState] = useState('start');
@@ -573,6 +575,7 @@ const TimelineItem = memo(
     showReplyParent,
     mediaFirst,
   }) => {
+    const { t } = useLingui();
     console.debug('RENDER TimelineItem', status.id);
     const { id: statusID, reblog, items, type, _pinned } = status;
     if (_pinned) useItemID = false;
@@ -836,6 +839,7 @@ const TimelineItem = memo(
 );
 
 function StatusCarousel({ title, class: className, children }) {
+  const { t } = useLingui();
   const carouselRef = useRef();
   // const { reachStart, reachEnd, init } = useScroll({
   //   scrollableRef: carouselRef,
@@ -929,6 +933,7 @@ function StatusCarousel({ title, class: className, children }) {
 }
 
 function TimelineStatusCompact({ status, instance, filterContext }) {
+  const { t } = useLingui();
   const snapStates = useSnapshot(states);
   const { id, visibility, language } = status;
   const statusPeekText = statusPeek(status);

src/components/translation-block.jsx

@@ -1,6 +1,6 @@
 import './translation-block.css';
 
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import pRetry from 'p-retry';
 import pThrottle from 'p-throttle';
 import { useEffect, useRef, useState } from 'preact/hooks';
@@ -80,6 +80,7 @@ function TranslationBlock({
   mini,
   autoDetected,
 }) {
+  const { t } = useLingui();
   const targetLang = getTranslateTargetLanguage(true);
   const [uiState, setUIState] = useState('default');
   const [pronunciationContent, setPronunciationContent] = useState(null);

src/compose.jsx

@@ -3,8 +3,8 @@ import './app.css';
 import './polyfills';
 
 import { i18n } from '@lingui/core';
-import { t, Trans } from '@lingui/macro';
 import { I18nProvider } from '@lingui/react';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { render } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 
@@ -12,7 +12,7 @@ import ComposeSuspense from './components/compose-suspense';
 import Loader from './components/loader';
 import { initActivateLang } from './utils/lang';
 import { initStates } from './utils/states';
-import { getCurrentAccount, setCurrentAccountID } from './utils/store-utils';
+import { getCurrentAccount } from './utils/store-utils';
 import useTitle from './utils/useTitle';
 
 initActivateLang();
@@ -22,6 +22,7 @@ if (window.opener) {
 }
 
 function App() {
+  const { t } = useLingui();
   const [uiState, setUIState] = useState('default');
   const [isLoggedIn, setIsLoggedIn] = useState(null);
 

src/data/catalogs.json

@@ -3,7 +3,7 @@
     "code": "ar-SA",
     "nativeName": "العربية",
     "name": "Arabic",
-    "completion": 25
+    "completion": 24
   },
   {
     "code": "ca-ES",
@@ -15,13 +15,13 @@
     "code": "cs-CZ",
     "nativeName": "čeština",
     "name": "Czech",
-    "completion": 79
+    "completion": 74
   },
   {
     "code": "de-DE",
     "nativeName": "Deutsch",
     "name": "German",
-    "completion": 94
+    "completion": 89
   },
   {
     "code": "eo-UY",
@@ -45,7 +45,7 @@
     "code": "fa-IR",
     "nativeName": "فارسی",
     "name": "Persian",
-    "completion": 78
+    "completion": 72
   },
   {
     "code": "fi-FI",
@@ -57,7 +57,7 @@
     "code": "fr-FR",
     "nativeName": "français",
     "name": "French",
-    "completion": 97
+    "completion": 93
   },
   {
     "code": "gl-ES",
@@ -69,7 +69,7 @@
     "code": "he-IL",
     "nativeName": "עברית",
     "name": "Hebrew",
-    "completion": 12
+    "completion": 10
   },
   {
     "code": "it-IT",
@@ -81,43 +81,43 @@
     "code": "ja-JP",
     "nativeName": "日本語",
     "name": "Japanese",
-    "completion": 51
+    "completion": 48
   },
   {
     "code": "kab",
     "nativeName": "Taqbaylit",
     "name": "Kabyle",
-    "completion": 98
+    "completion": 93
   },
   {
     "code": "ko-KR",
     "nativeName": "한국어",
     "name": "Korean",
-    "completion": 95
+    "completion": 90
   },
   {
     "code": "lt-LT",
     "nativeName": "lietuvių",
     "name": "Lithuanian",
-    "completion": 98
+    "completion": 100
   },
   {
     "code": "nb-NO",
     "nativeName": "norsk bokmål",
     "name": "Norwegian Bokmål",
-    "completion": 52
+    "completion": 47
   },
   {
     "code": "nl-NL",
     "nativeName": "Nederlands",
     "name": "Dutch",
-    "completion": 82
+    "completion": 77
   },
   {
     "code": "pl-PL",
     "nativeName": "polski",
     "name": "Polish",
-    "completion": 10
+    "completion": 9
   },
   {
     "code": "pt-BR",
@@ -143,11 +143,17 @@
     "name": "Thai",
     "completion": 9
   },
+  {
+    "code": "tr-TR",
+    "nativeName": "Türkçe",
+    "name": "Turkish",
+    "completion": 48
+  },
   {
     "code": "uk-UA",
     "nativeName": "українська",
     "name": "Ukrainian",
-    "completion": 100
+    "completion": 94
   },
   {
     "code": "zh-CN",
@@ -159,6 +165,6 @@
     "code": "zh-TW",
     "nativeName": "繁體中文",
     "name": "Traditional Chinese",
-    "completion": 32
+    "completion": 28
   }
 ]

src/pages/account-statuses.jsx

@@ -1,5 +1,4 @@
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
-import { useLingui } from '@lingui/react';
 import { MenuItem } from '@szhsin/react-menu';
 import {
   useCallback,
@@ -51,6 +50,7 @@ async function _isSearchEnabled(instance) {
 const isSearchEnabled = pmem(_isSearchEnabled);
 
 function AccountStatuses() {
+  const { i18n, t } = useLingui();
   const snapStates = useSnapshot(states);
   const { id, ...params } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -229,7 +229,6 @@ function AccountStatuses() {
   }
 
   const [featuredTags, setFeaturedTags] = useState([]);
-  const { i18n } = useLingui();
   let title = t`Account posts`;
   if (account?.acct) {
     const acctDisplay = (/@/.test(account.acct) ? '' : '@') + account.acct;

src/pages/accounts.jsx

@@ -1,7 +1,7 @@
 import './accounts.css';
 
 import { useAutoAnimate } from '@formkit/auto-animate/preact';
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
 import { useReducer } from 'preact/hooks';
 
@@ -20,6 +20,7 @@ import { getCurrentAccountID, setCurrentAccountID } from '../utils/store-utils';
 const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
 
 function Accounts({ onClose }) {
+  const { t } = useLingui();
   const { masto } = api();
   // Accounts
   const accounts = store.local.getJSON('accounts');

src/pages/annual-report.jsx

@@ -1,7 +1,6 @@
-import { t, Trans } from '@lingui/macro';
-
 import './annual-report.css';
 
+import { Trans } from '@lingui/react/macro';
 import { useEffect, useState } from 'preact/hooks';
 import { useParams } from 'react-router-dom';
 

src/pages/bookmarks.jsx

@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react/macro';
 import { useRef } from 'preact/hooks';
 
 import Timeline from '../components/timeline';
@@ -8,6 +8,7 @@ import useTitle from '../utils/useTitle';
 const LIMIT = 20;
 
 function Bookmarks() {
+  const { t } = useLingui();
   useTitle(t`Bookmarks`, '/bookmarks');
   const { masto, instance } = api();
   const bookmarksIterator = useRef();

src/pages/catchup.jsx

@@ -2,8 +2,8 @@ import '../components/links-bar.css';
 import './catchup.css';
 
 import autoAnimate from '@formkit/auto-animate';
-import { msg, Plural, select, t, Trans } from '@lingui/macro';
+import { msg, select } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
 import { getBlurHashAverageColor } from 'fast-blurhash';
 import { Fragment } from 'preact';
 import { memo } from 'preact/compat';
@@ -95,7 +95,7 @@ const DTF = mem(
 );
 
 function Catchup() {
-  const { i18n, _ } = useLingui();
+  const { i18n, _, t } = useLingui();
   const dtf = DTF(i18n.locale);
 
   useTitle(`Catch-up`, '/catchup');
@@ -1834,6 +1834,7 @@ function postDensity(post) {
 const MEDIA_SIZE = 48;
 
 function PostPeek({ post, filterInfo }) {
+  const { t } = useLingui();
   const {
     spoilerText,
     sensitive,
@@ -2048,6 +2049,7 @@ function PostPeek({ post, filterInfo }) {
 }
 
 function PostStats({ post }) {
+  const { t } = useLingui();
   const { reblogsCount, repliesCount, favouritesCount } = post;
   return (
     <span class="post-stats">

src/pages/favourites.jsx

@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useRef } from 'preact/hooks';
 
 import Timeline from '../components/timeline';
@@ -8,6 +8,7 @@ import useTitle from '../utils/useTitle';
 const LIMIT = 20;
 
 function Favourites() {
+  const { t } = useLingui();
   useTitle(t`Likes`, '/favourites');
   const { masto, instance } = api();
   const favouritesIterator = useRef();

src/pages/filters.jsx

@@ -1,8 +1,7 @@
 import './filters.css';
 
-import { i18n } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
-import { msg, Plural, t, Trans } from '@lingui/macro';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
-import { useLingui } from '@lingui/react';
 import { useEffect, useReducer, useRef, useState } from 'preact/hooks';
 
 import Icon from '../components/icon';
@@ -50,6 +49,7 @@ const EXPIRY_DURATIONS_LABELS = {
 };
 
 function Filters() {
+  const { t } = useLingui();
   const { masto } = api();
   useTitle(t`Filters`, `/ft`);
   const [uiState, setUIState] = useState('default');
@@ -197,7 +197,7 @@ function Filters() {
 let _id = 1;
 const incID = () => _id++;
 function FiltersAddEdit({ filter, onClose }) {
-  const { _ } = useLingui();
+  const { _, t } = useLingui();
   const { masto } = api();
   const [uiState, setUIState] = useState('default');
   const editMode = !!filter;
@@ -596,6 +596,7 @@ function FiltersAddEdit({ filter, onClose }) {
 }
 
 function ExpiryStatus({ expiresAt, showNeverExpires }) {
+  const { t } = useLingui();
   const hasExpiry = !!expiresAt;
   const expiresAtDate = hasExpiry && new Date(expiresAt);
   const expired = hasExpiry && expiresAtDate <= new Date();

src/pages/followed-hashtags.jsx

@@ -1,4 +1,4 @@
-import { Plural, t, Trans } from '@lingui/macro';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
 import { useEffect, useState } from 'preact/hooks';
 
 import Icon from '../components/icon';
@@ -10,6 +10,7 @@ import { fetchFollowedTags } from '../utils/followed-tags';
 import useTitle from '../utils/useTitle';
 
 function FollowedHashtags() {
+  const { t } = useLingui();
   const { masto, instance } = api();
   useTitle(t`Followed Hashtags`, `/fh`);
   const [uiState, setUIState] = useState('default');

src/pages/following.jsx

@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react/macro';
 import { useEffect, useRef } from 'preact/hooks';
 import { useSnapshot } from 'valtio';
 
@@ -17,6 +17,7 @@ import useTitle from '../utils/useTitle';
 const LIMIT = 20;
 
 function Following({ title, path, id, ...props }) {
+  const { t } = useLingui();
   useTitle(
     title ||
       t({

src/pages/hashtag.jsx

@@ -1,5 +1,5 @@
-import { plural, t, Trans } from '@lingui/macro';
+import { plural } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
+import { Trans, useLingui } from '@lingui/react/macro';
 import {
   FocusableItem,
   MenuDivider,
@@ -31,6 +31,7 @@ const TAGS_LIMIT_PER_MODE = 4;
 const TOTAL_TAGS_LIMIT = TAGS_LIMIT_PER_MODE + 1;
 
 function Hashtags({ media: mediaView, columnMode, ...props }) {
+  const { t } = useLingui();
   // const navigate = useNavigate();
   let { hashtag, ...params } = columnMode ? {} : useParams();
   if (props.hashtag) hashtag = props.hashtag;

src/pages/home.jsx

@@ -1,7 +1,7 @@
 import './notifications-menu.css';
 
-import { msg, t, Trans } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { ControlledMenu } from '@szhsin/react-menu';
 import { memo } from 'preact/compat';
 import { useEffect, useRef, useState } from 'preact/hooks';
@@ -62,6 +62,7 @@ function Home() {
 }
 
 function NotificationsLink() {
+  const { t } = useLingui();
   const snapStates = useSnapshot(states);
   const notificationLinkRef = useRef();
   const [menuState, setMenuState] = useState(undefined);

src/pages/http-route.jsx

@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
 import { useLayoutEffect, useState } from 'preact/hooks';
 import { useLocation } from 'react-router-dom';
 

src/pages/list.jsx

@@ -1,6 +1,6 @@
 import './lists.css';
 
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { InView } from 'react-intersection-observer';
@@ -25,6 +25,7 @@ import useTitle from '../utils/useTitle';
 const LIMIT = 20;
 
 function List(props) {
+  const { t } = useLingui();
   const snapStates = useSnapshot(states);
   const { masto, instance } = api();
   const id = props?.id || useParams()?.id;
@@ -222,6 +223,7 @@ function List(props) {
 
 const MEMBERS_LIMIT = 40;
 function ListManageMembers({ listID, onClose }) {
+  const { t } = useLingui();
   // Show list of members with [Remove] button
   // API only returns 40 members at a time, so this need to be paginated with infinite scroll
   // Show [Add] button after removing a member
@@ -301,6 +303,7 @@ function ListManageMembers({ listID, onClose }) {
 }
 
 function RemoveAddButton({ account, listID }) {
+  const { t } = useLingui();
   const { masto } = api();
   const [uiState, setUIState] = useState('default');
   const [removed, setRemoved] = useState(false);

src/pages/lists.jsx

@@ -1,6 +1,6 @@
 import './lists.css';
 
-import { Plural, t, Trans } from '@lingui/macro';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
 import { useEffect, useReducer, useState } from 'preact/hooks';
 
 import Icon from '../components/icon';
@@ -13,6 +13,7 @@ import { fetchLists } from '../utils/lists';
 import useTitle from '../utils/useTitle';
 
 function Lists() {
+  const { t } = useLingui();
   useTitle(t`Lists`, `/l`);
   const [uiState, setUIState] = useState('default');
 

src/pages/login.jsx

@@ -1,6 +1,6 @@
 import './login.css';
 
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import Fuse from 'fuse.js';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { useSearchParams } from 'react-router-dom';
@@ -23,6 +23,7 @@ import useTitle from '../utils/useTitle';
 const { PHANPY_DEFAULT_INSTANCE: DEFAULT_INSTANCE } = import.meta.env;
 
 function Login() {
+  const { t } = useLingui();
   useTitle('Log in');
   const instanceURLRef = useRef();
   const cachedInstanceURL = store.local.get('instanceURL');

src/pages/mentions.jsx

@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useMemo, useRef, useState } from 'preact/hooks';
 import { useSearchParams } from 'react-router-dom';
 
@@ -13,6 +13,7 @@ const LIMIT = 20;
 const emptySearchParams = new URLSearchParams();
 
 function Mentions({ columnMode, ...props }) {
+  const { t } = useLingui();
   const { masto, instance } = api();
   const [searchParams] = columnMode ? [emptySearchParams] : useSearchParams();
   const [stateType, setStateType] = useState(null);

src/pages/notifications.jsx

@@ -1,7 +1,7 @@
 import './notifications.css';
 
-import { msg, Plural, t, Trans } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
 import { Fragment } from 'preact';
 import { memo } from 'preact/compat';
 import {
@@ -109,7 +109,7 @@ const NOTIFICATIONS_POLICIES_TEXT = {
 };
 
 function Notifications({ columnMode }) {
-  const { _ } = useLingui();
+  const { _, t } = useLingui();
   useTitle(t`Notifications`, '/notifications');
   const { masto, instance } = api();
   const snapStates = useSnapshot(states);
@@ -1173,6 +1173,7 @@ function NotificationRequestModalButton({ request }) {
 }
 
 function NotificationRequestButtons({ request, onChange }) {
+  const { t } = useLingui();
   const { masto } = api();
   const [uiState, setUIState] = useState('default');
   const [requestState, setRequestState] = useState(null); // accept, dismiss

src/pages/public.jsx

@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
 import { useRef } from 'preact/hooks';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -16,6 +16,7 @@ import useTitle from '../utils/useTitle';
 const LIMIT = 20;
 
 function Public({ local, columnMode, ...props }) {
+  const { t } = useLingui();
   const snapStates = useSnapshot(states);
   const isLocal = !!local;
   const params = columnMode ? {} : useParams();

src/pages/search.jsx

@@ -1,7 +1,7 @@
 import './search.css';
 
 import { useAutoAnimate } from '@formkit/auto-animate/preact';
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { InView } from 'react-intersection-observer';
@@ -31,6 +31,7 @@ const scrollIntoViewOptions = {
 };
 
 function Search({ columnMode, ...props }) {
+  const { t } = useLingui();
   const params = columnMode ? {} : useParams();
   const { masto, instance, authenticated } = api({
     instance: params.instance,

src/pages/settings.jsx

@@ -1,6 +1,6 @@
 import './settings.css';
 
-import { Plural, t, Trans } from '@lingui/macro';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { useSnapshot } from 'valtio';
 
@@ -36,6 +36,7 @@ const {
 } = import.meta.env;
 
 function Settings({ onClose }) {
+  const { t } = useLingui();
   const snapStates = useSnapshot(states);
   const currentTheme = store.local.get('theme') || 'auto';
   const themeFormRef = useRef();
@@ -957,6 +958,7 @@ async function clearCaches() {
 }
 
 function PushNotificationsSection({ onClose }) {
+  const { t } = useLingui();
   if (!isPushSupported()) return null;
 
   const { instance } = api();

src/pages/status.jsx

@@ -1,6 +1,6 @@
 import './status.css';
 
-import { Plural, t, Trans } from '@lingui/macro';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
 import { Menu, MenuDivider, MenuHeader, MenuItem } from '@szhsin/react-menu';
 import debounce from 'just-debounce-it';
 import pRetry from 'p-retry';
@@ -73,6 +73,7 @@ const STATUSES_SELECTOR =
 const STATUS_URL_REGEX = /\/s\//i;
 
 function StatusPage(params) {
+  const { t } = useLingui();
   const { id } = params;
   const { masto, instance } = api({ instance: params.instance });
   const snapStates = useSnapshot(states);
@@ -214,6 +215,7 @@ function createdAtSort(a, b) {
 }
 
 function StatusThread({ id, closeLink = '/', instance: propInstance }) {
+  const { t } = useLingui();
   const [searchParams, setSearchParams] = useSearchParams();
   const mediaParam = searchParams.get('media');
   const mediaStatusID = searchParams.get('mediaStatusID');
@@ -1377,6 +1379,7 @@ function SubComments({
   openAll,
   parentLink,
 }) {
+  const { t } = useLingui();
   const [searchParams, setSearchParams] = useSearchParams();
 
   // Total comments count, including sub-replies

src/pages/trending.jsx

@@ -1,7 +1,7 @@
 import '../components/links-bar.css';
 import './trending.css';
 
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { MenuItem } from '@szhsin/react-menu';
 import { getBlurHashAverageColor } from 'fast-blurhash';
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
@@ -62,6 +62,7 @@ function fetchLinkList(masto, params) {
 }
 
 function Trending({ columnMode, ...props }) {
+  const { t } = useLingui();
   const snapStates = useSnapshot(states);
   const params = columnMode ? {} : useParams();
   const { masto, instance } = api({

src/pages/welcome.jsx

@@ -1,6 +1,6 @@
 import './welcome.css';
 
-import { t, Trans } from '@lingui/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 
 import boostsCarouselUrl from '../assets/features/boosts-carousel.jpg';
 import groupedNotificationsUrl from '../assets/features/grouped-notifications.jpg';
@@ -31,6 +31,7 @@ const appVersion = __BUILD_TIME__
   : null;
 
 function Welcome() {
+  const { t } = useLingui();
   useTitle(null, ['/', '/welcome']);
   return (
     <main id="welcome">

src/utils/focus-deck.js

@@ -8,12 +8,12 @@ const focusDeck = () => {
         focusedColumn.focus();
       } else {
         // Focus first column within viewport
-        const firstVisibleColumn = columns
+        const firstVisibleColumn = Array.from(
-          .querySelectorAll('.deck-container')
+          columns.querySelectorAll('.deck-container'),
-          .find((column) => {
+        ).find((column) => {
-            const columnRect = column.getBoundingClientRect();
+          const columnRect = column.getBoundingClientRect();
-            return columnRect.left >= 0;
+          return columnRect.left >= 0;
-          });
+        });
         if (firstVisibleColumn) {
           firstVisibleColumn.focus();
         } else {

src/utils/open-compose.js

@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 
 export default function openCompose(opts) {
   const url = URL.parse('/compose/', window.location);

src/utils/show-compose.js

@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 
 import openOSK from './open-osk';
 import showToast from './show-toast';

vite.config.js

@@ -157,7 +157,9 @@ export default defineConfig({
   ],
   build: {
     sourcemap: true,
-    cssCodeSplit: false,
+    // Note: In Vite 6, if cssCodeSplit = false, it will show error "Cannot read properties of undefined (reading 'includes')"
+    // TODO: Revisit this when this issue is fixed
+    // cssCodeSplit: false,
     rollupOptions: {
       treeshake: false,
       input: {