'All' and 'Starred' labels are now translatable (#1765)

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

@@ -9,7 +9,7 @@ import { Constants } from "app/constants"
 import { redirectToRootCategory, redirectToSelectedSource } from "app/redirect/thunks"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { reloadTree } from "app/tree/thunks"
-import type { CategoryModificationRequest } from "app/types"
+import type { Category, CategoryModificationRequest } from "app/types"
 import { flattenCategoryTree } from "app/utils"
 import { Alert } from "components/Alert"
 import { Loader } from "components/Loader"
@@ -27,10 +27,15 @@ export function CategoryDetailsPage() {
     const dispatch = useAppDispatch()
 
     const query = useAsync(async () => await client.category.getRoot(), [])
-    const category =
-        id === Constants.categories.starred.id
-            ? { ...Constants.categories.starred, name: _(msg`Starred`) }
-            : query.result && flattenCategoryTree(query.result.data).find(c => c.id === id)
+
+    let category: Category | undefined
+    if (id === Constants.categories.all.id) {
+        category = { ...Constants.categories.starred, name: _(msg`All`) }
+    } else if (id === Constants.categories.starred.id) {
+        category = { ...Constants.categories.all, name: _(msg`Starred`) }
+    } else {
+        category = query.result && flattenCategoryTree(query.result.data).find(c => c.id === id)
+    }
 
     const form = useForm<CategoryModificationRequest>()
     const { setValues } = form

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

@@ -48,6 +48,13 @@ export function FeedEntriesPage(props: FeedEntriesPageProps) {
     const hasMore = useAppSelector(state => state.entries.hasMore)
     const dispatch = useAppDispatch()
 
+    let title: React.ReactNode = sourceLabel
+    if (id === Constants.categories.all.id) {
+        title = <Trans>All</Trans>
+    } else if (id === Constants.categories.starred.id) {
+        title = <Trans>Starred</Trans>
+    }
+
     const titleClicked = () => {
         switch (props.sourceType) {
             case "category":
@@ -84,15 +91,13 @@ export function FeedEntriesPage(props: FeedEntriesPageProps) {
             <Group gap="xl">
                 {sourceWebsiteUrl && (
                     <a href={sourceWebsiteUrl} target="_blank" rel="noreferrer" className={classes.sourceWebsiteLink}>
-                        <Title order={3}>{sourceLabel}</Title>
+                        <Title order={3}>{title}</Title>
                     </a>
                 )}
-                {!sourceWebsiteUrl && <Title order={3}>{sourceLabel}</Title>}
-                {sourceLabel && (
-                    <ActionIcon onClick={titleClicked} variant="subtle" color={theme.primaryColor}>
-                        <TbEdit size={18} />
-                    </ActionIcon>
-                )}
+                {!sourceWebsiteUrl && <Title order={3}>{title}</Title>}
+                <ActionIcon onClick={titleClicked} variant="subtle" color={theme.primaryColor}>
+                    <TbEdit size={18} />
+                </ActionIcon>
             </Group>
 
             <FeedEntries />