replace t` with msg` to fix labels not being translated correctly

commafeed-client/src/components/content/FeedEntryFooter.tsx

@@ -1,4 +1,5 @@
-import { msg, t } from "@lingui/macro"
+import { msg } from "@lingui/macro"
+import { useLingui } from "@lingui/react"
 import { Group, Indicator, Popover, TagsInput } from "@mantine/core"
 import { markEntriesUpToEntry, markEntry, starEntry, tagEntry } from "app/entries/thunks"
 import { useAppDispatch, useAppSelector } from "app/store"
@@ -18,6 +19,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
     const mobile = useMobile()
     const { spacing } = useActionButton()
     const dispatch = useAppDispatch()
+    const { _ } = useLingui()
 
     const readStatusButtonClicked = async () =>
         await dispatch(
@@ -75,7 +77,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
                         </Popover.Target>
                         <Popover.Dropdown>
                             <TagsInput
-                                placeholder={t`Tags`}
+                                placeholder={_(msg`Tags`)}
                                 data={tags}
                                 value={props.entry.tags}
                                 onChange={onTagsChange}

commafeed-client/src/components/content/add/AddCategory.tsx

@@ -1,4 +1,5 @@
-import { Trans, t } from "@lingui/macro"
+import { Trans, msg } from "@lingui/macro"
+import { useLingui } from "@lingui/react"
 import { Box, Button, Group, Stack, TextInput } from "@mantine/core"
 import { useForm } from "@mantine/form"
 import { client, errorToStrings } from "app/client"
@@ -13,6 +14,7 @@ import { CategorySelect } from "./CategorySelect"
 
 export function AddCategory() {
     const dispatch = useAppDispatch()
+    const { _ } = useLingui()
 
     const form = useForm<AddCategoryRequest>()
 
@@ -33,7 +35,7 @@ export function AddCategory() {
 
             <form onSubmit={form.onSubmit(addCategory.execute)}>
                 <Stack>
-                    <TextInput label={<Trans>Category</Trans>} placeholder={t`Category`} {...form.getInputProps("name")} required />
+                    <TextInput label={<Trans>Category</Trans>} placeholder={_(msg`Category`)} {...form.getInputProps("name")} required />
                     <CategorySelect label={<Trans>Parent</Trans>} {...form.getInputProps("parentId")} clearable />
                     <Group justify="center">
                         <Button variant="default" onClick={async () => await dispatch(redirectToSelectedSource())}>

commafeed-client/src/components/content/add/CategorySelect.tsx

@@ -1,4 +1,5 @@
-import { t } from "@lingui/macro"
+import { msg } from "@lingui/macro"
+import { useLingui } from "@lingui/react"
 import { Select, type SelectProps } from "@mantine/core"
 import type { ComboboxItem } from "@mantine/core/lib/components/Combobox/Combobox.types"
 import { Constants } from "app/constants"
@@ -13,6 +14,8 @@ type CategorySelectProps = Partial<SelectProps> & {
 
 export function CategorySelect(props: CategorySelectProps) {
     const rootCategory = useAppSelector(state => state.tree.rootCategory)
+    const { _ } = useLingui()
+
     const categories = rootCategory && flattenCategoryTree(rootCategory)
     const categoriesById = categories?.reduce((map, c) => {
         map.set(c.id, c)
@@ -43,7 +46,7 @@ export function CategorySelect(props: CategorySelectProps) {
         .sort((c1, c2) => c1.label.localeCompare(c2.label))
     if (props.withAll) {
         selectData?.unshift({
-            label: t`All`,
+            label: _(msg`All`),
             value: Constants.categories.all.id,
         })
     }

commafeed-client/src/components/content/add/ImportOpml.tsx

@@ -1,4 +1,5 @@
-import { Trans, t } from "@lingui/macro"
+import { Trans, msg } from "@lingui/macro"
+import { useLingui } from "@lingui/react"
 import { Box, Button, FileInput, Group, Stack } from "@mantine/core"
 import { isNotEmpty, useForm } from "@mantine/form"
 import { client, errorToStrings } from "app/client"
@@ -11,10 +12,11 @@ import { TbFileImport } from "react-icons/tb"
 
 export function ImportOpml() {
     const dispatch = useAppDispatch()
+    const { _ } = useLingui()
 
     const form = useForm<{ file: File }>({
         validate: {
-            file: isNotEmpty(t`OPML file is required`),
+            file: isNotEmpty(_(msg`OPML file is required`)),
         },
     })
 
@@ -38,7 +40,7 @@ export function ImportOpml() {
                     <FileInput
                         label={<Trans>OPML file</Trans>}
                         leftSection={<TbFileImport />}
-                        placeholder={t`OPML file`}
+                        placeholder={_(msg`OPML file`)}
                         description={
                             <Trans>
                                 An opml file is an XML file containing feed URLs and categories. You can get an OPML file by exporting your

commafeed-client/src/components/header/Header.tsx

@@ -1,4 +1,5 @@
-import { msg, t } from "@lingui/macro"
+import { msg } from "@lingui/macro"
+import { useLingui } from "@lingui/react"
 import { Box, Center, CloseButton, Divider, Group, Indicator, Popover, TextInput } from "@mantine/core"
 import { useForm } from "@mantine/form"
 import { reloadEntries, search, selectNextEntry, selectPreviousEntry } from "app/entries/thunks"
@@ -57,10 +58,11 @@ export function Header() {
     const searchFromStore = useAppSelector(state => state.entries.search)
     const { isBrowserExtensionPopup, openSettingsPage, openAppInNewTab } = useBrowserExtension()
     const dispatch = useAppDispatch()
+    const { _ } = useLingui()
 
     const searchForm = useForm<{ search: string }>({
         validate: {
-            search: value => (value.length > 0 && value.length < 3 ? t`Search requires at least 3 characters` : null),
+            search: value => (value.length > 0 && value.length < 3 ? _(msg`Search requires at least 3 characters`) : null),
         },
     })
     const { setValues } = searchForm
@@ -133,7 +135,7 @@ export function Header() {
                     <Popover.Dropdown>
                         <form onSubmit={searchForm.onSubmit(async values => await dispatch(search(values.search)))}>
                             <TextInput
-                                placeholder={t`Search`}
+                                placeholder={_(msg`Search`)}
                                 {...searchForm.getInputProps("search")}
                                 leftSection={<TbSearch size={iconSize} />}
                                 rightSection={<CloseButton onClick={async () => await (searchFromStore && dispatch(search("")))} />}

commafeed-client/src/components/settings/DisplaySettings.tsx

@@ -1,4 +1,5 @@
-import { Trans, t } from "@lingui/macro"
+import { Trans, msg } from "@lingui/macro"
+import { useLingui } from "@lingui/react"
 import { Divider, Group, Radio, Select, SimpleGrid, Stack, Switch } from "@mantine/core"
 import type { ComboboxData } from "@mantine/core/lib/components/Combobox/Combobox.types"
 import { Constants } from "app/constants"
@@ -33,6 +34,7 @@ export function DisplaySettings() {
     const mobileFooter = useAppSelector(state => state.user.settings?.mobileFooter)
     const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
     const dispatch = useAppDispatch()
+    const { _ } = useLingui()
 
     const scrollModeOptions: Record<ScrollMode, ReactNode> = {
         always: <Trans>Always</Trans>,
@@ -43,19 +45,19 @@ export function DisplaySettings() {
     const displayModeData: ComboboxData = [
         {
             value: "always",
-            label: t`Always`,
+            label: _(msg`Always`),
         },
         {
             value: "on_desktop",
-            label: t`On desktop`,
+            label: _(msg`On desktop`),
         },
         {
             value: "on_mobile",
-            label: t`On mobile`,
+            label: _(msg`On mobile`),
         },
         {
             value: "never",
-            label: t`Never`,
+            label: _(msg`Never`),
         },
     ]
 

commafeed-client/src/components/settings/ProfileSettings.tsx

@@ -1,4 +1,5 @@
-import { Trans, t } from "@lingui/macro"
+import { Trans, msg } from "@lingui/macro"
+import { useLingui } from "@lingui/react"
 import { Anchor, Box, Button, Checkbox, Divider, Group, Input, PasswordInput, Stack, Text, TextInput } from "@mantine/core"
 import { useForm } from "@mantine/form"
 import { openConfirmModal } from "@mantine/modals"
@@ -19,10 +20,11 @@ interface FormData extends ProfileModificationRequest {
 export function ProfileSettings() {
     const profile = useAppSelector(state => state.user.profile)
     const dispatch = useAppDispatch()
+    const { _ } = useLingui()
 
     const form = useForm<FormData>({
         validate: {
-            newPasswordConfirmation: (value, values) => (value !== values.newPassword ? t`Passwords do not match` : null),
+            newPasswordConfirmation: (value, values) => (value !== values.newPassword ? _(msg`Passwords do not match`) : null),
         },
     })
     const { setValues } = form

commafeed-client/src/components/sidebar/TreeSearch.tsx

@@ -1,4 +1,5 @@
-import { Trans, t } from "@lingui/macro"
+import { Trans, msg } from "@lingui/macro"
+import { useLingui } from "@lingui/react"
 import { TextInput } from "@mantine/core"
 import { Spotlight, type SpotlightActionData, spotlight } from "@mantine/spotlight"
 import { redirectToFeed } from "app/redirect/thunks"
@@ -14,6 +15,8 @@ export interface TreeSearchProps {
 
 export function TreeSearch(props: TreeSearchProps) {
     const dispatch = useAppDispatch()
+    const { _ } = useLingui()
+
     const actions: SpotlightActionData[] = props.feeds
         .map(f => ({
             id: `${f.id}`,
@@ -31,7 +34,7 @@ export function TreeSearch(props: TreeSearchProps) {
     return (
         <>
             <TextInput
-                placeholder={t`Search`}
+                placeholder={_(msg`Search`)}
                 leftSection={searchIcon}
                 rightSectionWidth={100}
                 styles={{
@@ -50,7 +53,7 @@ export function TreeSearch(props: TreeSearchProps) {
                 shortcut="mod+k"
                 searchProps={{
                     leftSection: searchIcon,
-                    placeholder: t`Search`,
+                    placeholder: _(msg`Search`),
                 }}
                 nothingFound={<Trans>Nothing found</Trans>}
             />

commafeed-client/src/hooks/useAppLoading.ts

@@ -1,4 +1,5 @@
-import { t } from "@lingui/macro"
+import { msg } from "@lingui/macro"
+import { useLingui } from "@lingui/react"
 import { useAppSelector } from "app/store"
 
 interface Step {
@@ -11,22 +12,23 @@ export const useAppLoading = () => {
     const settings = useAppSelector(state => state.user.settings)
     const rootCategory = useAppSelector(state => state.tree.rootCategory)
     const tags = useAppSelector(state => state.user.tags)
+    const { _ } = useLingui()
 
     const steps: Step[] = [
         {
-            label: t`Loading settings...`,
+            label: _(msg`Loading settings...`),
             done: !!settings,
         },
         {
-            label: t`Loading profile...`,
+            label: _(msg`Loading profile...`),
             done: !!profile,
         },
         {
-            label: t`Loading subscriptions...`,
+            label: _(msg`Loading subscriptions...`),
             done: !!rootCategory,
         },
         {
-            label: t`Loading tags...`,
+            label: _(msg`Loading tags...`),
             done: !!tags,
         },
     ]

commafeed-client/src/pages/app/AboutPage.tsx

@@ -1,4 +1,5 @@
-import { Trans, t } from "@lingui/macro"
+import { Trans, msg } from "@lingui/macro"
+import { useLingui } from "@lingui/react"
 import { Anchor, Box, Container, List, NativeSelect, SimpleGrid, Title } from "@mantine/core"
 import { Constants } from "app/constants"
 import { redirectToApiDocumentation } from "app/redirect/thunks"
@@ -36,6 +37,8 @@ function Section(props: { title: React.ReactNode; icon: React.ReactNode; childre
 function NextUnreadBookmarklet() {
     const [categoryId, setCategoryId] = useState(Constants.categories.all.id)
     const [order, setOrder] = useState("desc")
+    const { _ } = useLingui()
+
     const baseUrl = window.location.href.substring(0, window.location.href.lastIndexOf("#"))
     const href = `javascript:window.location.href='${baseUrl}next?category=${categoryId}&order=${order}&t='+new Date().getTime();`
 
@@ -44,8 +47,8 @@ function NextUnreadBookmarklet() {
             <CategorySelect value={categoryId} onChange={c => c && setCategoryId(c)} withAll description={<Trans>Category</Trans>} />
             <NativeSelect
                 data={[
-                    { value: "desc", label: t`Newest first` },
+                    { value: "desc", label: _(msg`Newest first`) },
-                    { value: "asc", label: t`Oldest first` },
+                    { value: "asc", label: _(msg`Oldest first`) },
                 ]}
                 value={order}
                 onChange={e => setOrder(e.target.value)}

commafeed-client/src/pages/auth/LoginPage.tsx

@@ -1,4 +1,5 @@
-import { Trans, t } from "@lingui/macro"
+import { Trans, msg } from "@lingui/macro"
+import { useLingui } from "@lingui/react"
 import { Anchor, Box, Button, Center, Container, Group, Paper, PasswordInput, Stack, TextInput, Title } from "@mantine/core"
 import { useForm } from "@mantine/form"
 import { client, errorToStrings } from "app/client"
@@ -13,6 +14,7 @@ import { Link } from "react-router-dom"
 export function LoginPage() {
     const serverInfos = useAppSelector(state => state.server.serverInfos)
     const dispatch = useAppDispatch()
+    const { _ } = useLingui()
 
     const form = useForm<LoginRequest>({
         initialValues: {
@@ -43,7 +45,7 @@ export function LoginPage() {
                     <Stack>
                         <TextInput
                             label={<Trans>User Name or E-mail</Trans>}
-                            placeholder={t`User Name or E-mail`}
+                            placeholder={_(msg`User Name or E-mail`)}
                             {...form.getInputProps("name")}
                             description={
                                 serverInfos?.demoAccountEnabled ? <Trans>Try out CommaFeed with the demo account: demo/demo</Trans> : ""
@@ -54,7 +56,7 @@ export function LoginPage() {
                         />
                         <PasswordInput
                             label={<Trans>Password</Trans>}
-                            placeholder={t`Password`}
+                            placeholder={_(msg`Password`)}
                             {...form.getInputProps("password")}
                             size="md"
                             required

commafeed-client/src/pages/auth/PasswordRecoveryPage.tsx

@@ -1,4 +1,5 @@
-import { Trans, t } from "@lingui/macro"
+import { Trans, msg } from "@lingui/macro"
+import { useLingui } from "@lingui/react"
 import { Anchor, Box, Button, Center, Container, Group, Paper, Stack, TextInput, Title } from "@mantine/core"
 import { useForm } from "@mantine/form"
 import { client, errorToStrings } from "app/client"
@@ -11,6 +12,7 @@ import { Link } from "react-router-dom"
 
 export function PasswordRecoveryPage() {
     const [message, setMessage] = useState("")
+    const { _ } = useLingui()
 
     const form = useForm<PasswordResetRequest>({
         initialValues: {
@@ -20,7 +22,7 @@ export function PasswordRecoveryPage() {
 
     const recoverPassword = useAsyncCallback(client.user.passwordReset, {
         onSuccess: () => {
-            setMessage(t`An email has been sent if this address was registered. Check your inbox.`)
+            setMessage(_(msg`An email has been sent if this address was registered. Check your inbox.`))
         },
     })
 
@@ -54,7 +56,7 @@ export function PasswordRecoveryPage() {
                         <TextInput
                             type="email"
                             label={<Trans>E-mail</Trans>}
-                            placeholder={t`E-mail`}
+                            placeholder={_(msg`E-mail`)}
                             {...form.getInputProps("email")}
                             size="md"
                             required

commafeed-client/src/pages/auth/RegistrationPage.tsx

@@ -1,4 +1,5 @@
-import { Trans, t } from "@lingui/macro"
+import { Trans, msg } from "@lingui/macro"
+import { useLingui } from "@lingui/react"
 import { Anchor, Box, Button, Center, Container, Group, Paper, PasswordInput, Stack, TextInput, Title } from "@mantine/core"
 import { useForm } from "@mantine/form"
 import { client, errorToStrings } from "app/client"
@@ -13,6 +14,7 @@ import { Link } from "react-router-dom"
 export function RegistrationPage() {
     const serverInfos = useAppSelector(state => state.server.serverInfos)
     const dispatch = useAppDispatch()
+    const { _ } = useLingui()
 
     const form = useForm<RegistrationRequest>({
         initialValues: {
@@ -37,7 +39,7 @@ export function RegistrationPage() {
                 </Title>
                 {serverInfos && !serverInfos.allowRegistrations && (
                     <Box mb="md">
-                        <Alert messages={[t`Registrations are closed on this CommaFeed instance`]} />
+                        <Alert messages={[_(msg`Registrations are closed on this CommaFeed instance`)]} />
                     </Box>
                 )}
                 {serverInfos?.allowRegistrations && (
@@ -54,14 +56,14 @@ export function RegistrationPage() {
                                 <TextInput
                                     type="email"
                                     label={<Trans>E-mail address</Trans>}
-                                    placeholder={t`E-mail address`}
+                                    placeholder={_(msg`E-mail address`)}
                                     {...form.getInputProps("email")}
                                     size="md"
                                     required
                                 />
                                 <PasswordInput
                                     label={<Trans>Password</Trans>}
-                                    placeholder={t`Password`}
+                                    placeholder={_(msg`Password`)}
                                     {...form.getInputProps("password")}
                                     size="md"
                                     required