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