refactor: Improve i18n for aliases

public/locales/en-US/aliases.json

@@ -0,0 +1,31 @@
+{
+  "title": "Aliases",
+  "isInCopyMode": "You are in copy mode. Click on an alias to copy it to your clipboard.",
+  "emptyState": {
+    "title": "Welcome to your Aliases!",
+    "description": "Create your first Alias to get started."
+  },
+  "pageActions": {
+    "search": {
+      "placeholder": "Search for names"
+    },
+    "searchFilter": {
+      "active": "Active",
+      "inactive": "Inactive"
+    },
+    "typeFilter": {
+      "custom": "Custom made",
+      "random": "Randomly generated"
+    }
+  },
+  "actions": {
+    "createRandomAlias": {
+      "title": "Create Random Alias"
+    },
+    "createCustomAlias": {
+      "title": "Create Custom Alias",
+      "description": "You can define your own custom alias. Note that a random suffix will be added at the end to avoid duplicates.",
+      "continueActionLabel": "Create Alias"
+    }
+  }
+}

public/locales/en-US/common.json

@@ -24,11 +24,23 @@
       "errors": {
         "mismatch": "Passwords do not match."
       }
+    },
+    "customAliasLocal": {
+      "label": "Address",
+      "placeholder": "awesome-fish"
+    },
+    "search": {
+      "label": "Search"
     }
   },
   "messages": {
     "errors": {
-      "unknown": "An unknown error occurred."
+      "unknown": "An unknown error occurred.",
+      "copyFailed": "Copying to clipboard did not work. Please copy the text manually."
+    },
+    "alias": {
+      "addressCopied": "Address has been copied to your clipboard!",
+      "created": "Alias has been created successfully!"
     }
   },
   "general": {
@@ -36,5 +48,9 @@
     "yesLabel": "Yes",
     "noLabel": "No",
     "continueLabel": "Continue"
+  },
+  "noSearchResults": {
+    "title": "Nothing found",
+    "description": "We couldn't find anything for your search query. Try again with a different query."
   }
 }

public/locales/en-US/translation.json

@@ -26,52 +26,6 @@
             "title": "Overview",
             "description": "Not much to see here, yet."
         },
-        "CompleteAccountRoute": {
-            "forms": {
-                "available": {
-                    "title": "Encryption already enabled",
-                    "description": "You already have encryption enabled. Changing passwords is currently not supported."
-                }
-            }
-        },
-        "AliasesRoute": {
-            "title": "Aliases",
-            "isInCopyMode": "You are in copy mode. Click on an alias to copy it to your clipboard.",
-            "emptyState": {
-                "title": "Welcome to your Aliases!",
-                "description": "Create your first Alias to get started."
-            },
-            "pageActions": {
-                "search": {
-                    "label": "Search",
-                    "placeholder": "Search for names"
-                },
-                "searchFilter": {
-                    "active": "Active",
-                    "inactive": "Inactive"
-                },
-                "typeFilter": {
-                    "custom": "Custom made",
-                    "random": "Randomly generated"
-                }
-            },
-            "actions": {
-                "createRandomAlias": {
-                    "label": "Create Random Alias"
-                },
-                "createCustomAlias": {
-                    "label": "Create Custom Alias",
-                    "description": "You can define your own custom alias. Note that a random suffix will be added at the end to avoid duplicates.",
-                    "continueAction": "Create Alias",
-                    "form": {
-                        "address": {
-                            "label": "Address",
-                            "placeholder": "awesome-fish"
-                        }
-                    }
-                }
-            }
-        },
         "AliasDetailRoute": {
             "title": "Alias Details",
             "sections": {
@@ -236,10 +190,6 @@
                 }
             }
         },
-        "LogoutRoute": {
-            "title": "Log out",
-            "description": "We are logging you out..."
-        },
         "ReservedAliasesRoute": {
             "title": "Reserved Aliases",
             "pageActions": {
@@ -448,10 +398,6 @@
             "random": "This is a randomly generated alias",
             "custom": "This is a custom-made alias"
         },
-        "NoSearchResults": {
-            "title": "Nothing found",
-            "description": "We couldn't find anything for your search query. Try again with a different query."
-        },
         "LockNavigationContextProvider": {
             "title": "Are you sure you want to leave?",
             "description": "You have unsaved changes. If you leave, your changes will be lost.",

src/components/widgets/NoSearchResults.tsx

@@ -5,20 +5,18 @@ import {FaQuestion} from "react-icons/fa"
 import {Grid, Typography} from "@mui/material"
 
 export default function NoSearchResults(): ReactElement {
-	const {t} = useTranslation()
+	const {t} = useTranslation("common")
 
 	return (
 		<Grid container spacing={4} direction="column" alignItems="center">
 			<Grid item>
-				<Typography variant="h6">{t("components.NoSearchResults.title")}</Typography>
+				<Typography variant="h6">{t("noSearchResults.title")}</Typography>
 			</Grid>
 			<Grid item>
 				<FaQuestion size={40} />
 			</Grid>
 			<Grid item>
-				<Typography variant="body1">
+				<Typography variant="body1">{t("noSearchResults.description")}</Typography>
-					{t("components.NoSearchResults.description")}
-				</Typography>
 			</Grid>
 		</Grid>
 	)

src/init-i18n.ts

@@ -15,6 +15,7 @@ i18n.use(HttpApi)
 	.init({
 		debug: isDev,
 		fallbackLng: "en-US",
+		load: "all",
 		backend: {
 			loadPath: "/locales/{{lng}}/{{ns}}.json",
 		},

src/route-widgets/AliasesRoute/CreateAliasButton.tsx

@@ -26,7 +26,7 @@ import {AuthContext, EncryptionStatus} from "~/components"
 import CustomAliasDialog from "~/route-widgets/AliasesRoute/CustomAliasDialog"
 
 export function CreateAliasButton(): ReactElement {
-	const {t} = useTranslation()
+	const {t} = useTranslation(["aliases", "common"])
 	const {showSuccess, showError} = useErrorSuccessSnacks()
 	const {_encryptUsingMasterPassword, encryptionStatus} = useContext(AuthContext)
 
@@ -54,7 +54,7 @@ export function CreateAliasButton(): ReactElement {
 		{
 			onError: showError,
 			onSuccess: async alias => {
-				showSuccess(t("relations.alias.mutations.success.aliasCreation"))
+				showSuccess(t("messages.alias.created", {ns: "common"}))
 
 				await queryClient.invalidateQueries({
 					queryKey: ["get_aliases"],
@@ -82,7 +82,7 @@ export function CreateAliasButton(): ReactElement {
 						})
 					}
 				>
-					{t("routes.AliasesRoute.actions.createRandomAlias.label")}
+					{t("actions.createRandomAlias.title")}
 				</Button>
 				<Button size="small" onClick={event => setAnchorElement(event.currentTarget)}>
 					<MdArrowDropDown />
@@ -100,9 +100,7 @@ export function CreateAliasButton(): ReactElement {
 						<ListItemIcon>
 							<FaPen />
 						</ListItemIcon>
-						<ListItemText
+						<ListItemText primary={t("actions.createCustomAlias.title")} />
-							primary={t("routes.AliasesRoute.actions.createCustomAlias.label")}
-						/>
 					</MenuItem>
 				</MenuList>
 			</Menu>

src/route-widgets/AliasesRoute/CustomAliasDialog.tsx

@@ -45,7 +45,7 @@ export default function CustomAliasDialog({
 	onClose,
 }: CustomAliasDialogProps): ReactElement {
 	const serverSettings = useLoaderData() as ServerSettings
-	const {t} = useTranslation()
+	const {t} = useTranslation(["aliases", "common"])
 
 	const schema = yup.object().shape({
 		local: yup
@@ -54,7 +54,7 @@ export default function CustomAliasDialog({
 			.required()
 			.min(1)
 			.max(64 - serverSettings.customAliasSuffixLength - 1)
-			.label(t("routes.AliasesRoute.actions.createCustomAlias.form.address.label")),
+			.label(t("fields.customAliasLocal.label", {ns: "common"})),
 	})
 
 	const formik = useFormik<Form>({
@@ -78,12 +78,10 @@ export default function CustomAliasDialog({
 	return (
 		<Dialog onClose={onClose} open={visible} keepMounted={false}>
 			<form onSubmit={formik.handleSubmit}>
-				<DialogTitle>
+				<DialogTitle>{t("actions.createCustomAlias.title")}</DialogTitle>
-					{t("routes.AliasesRoute.actions.createCustomAlias.label")}
-				</DialogTitle>
 				<DialogContent>
 					<DialogContentText>
-						{t("routes.AliasesRoute.actions.createCustomAlias.description")}
+						{t("actions.createCustomAlias.description")}
 					</DialogContentText>
 					<Box paddingY={4}>
 						<TextField
@@ -92,12 +90,8 @@ export default function CustomAliasDialog({
 							autoFocus
 							name="local"
 							id="local"
-							label={t(
+							label={t("fields.customAliasLocal.label", {ns: "common"})}
-								"routes.AliasesRoute.actions.createCustomAlias.form.address.label",
+							placeholder={t("fields.customAliasLocal.placeholder", {ns: "common"})}
-							)}
-							placeholder={t(
-								"routes.AliasesRoute.actions.createCustomAlias.form.address.placeholder",
-							)}
 							value={formik.values.local}
 							onChange={formik.handleChange}
 							disabled={formik.isSubmitting}
@@ -122,7 +116,7 @@ export default function CustomAliasDialog({
 				</DialogContent>
 				<DialogActions>
 					<Button onClick={onClose} startIcon={<TiCancel />}>
-						{t("general.cancelLabel")}
+						{t("general.cancelLabel", {ns: "common"})}
 					</Button>
 					<Button
 						onClick={() => {}}
@@ -131,7 +125,7 @@ export default function CustomAliasDialog({
 						variant="contained"
 						type="submit"
 					>
-						{t("routes.AliasesRoute.actions.createCustomAlias.continueAction")}
+						{t("actions.createCustomAlias.continueActionLabel")}
 					</Button>
 				</DialogActions>
 			</form>

src/route-widgets/AliasesRoute/EmptyStateScreen.tsx

@@ -5,7 +5,7 @@ import {FaMask} from "react-icons/fa"
 import {Container, Grid, Typography} from "@mui/material"
 
 export default function EmptyStateScreen(): ReactElement {
-	const {t} = useTranslation()
+	const {t} = useTranslation("aliases")
 
 	return (
 		<Container maxWidth="xs">
@@ -20,16 +20,14 @@ export default function EmptyStateScreen(): ReactElement {
 			>
 				<Grid item>
 					<Typography variant="h6" component="h2">
-						{t("routes.AliasesRoute.emptyState.title")}
+						{t("emptyState.title")}
 					</Typography>
 				</Grid>
 				<Grid item>
 					<FaMask size={40} />
 				</Grid>
 				<Grid item>
-					<Typography variant="body1">
+					<Typography variant="body1">{t("emptyState.description")}</Typography>
-						{t("routes.AliasesRoute.emptyState.description")}
-					</Typography>
 				</Grid>
 			</Grid>
 		</Container>

src/routes/AliasesRoute.tsx

@@ -36,7 +36,7 @@ enum TypeFilter {
 }
 
 export default function AliasesRoute(): ReactElement {
-	const {t} = useTranslation()
+	const {t} = useTranslation(["aliases", "common"])
 
 	const [searchValue, setSearchValue] = useState<string>("")
 	const [queryValue, setQueryValue] = useState<string>("")
@@ -131,7 +131,7 @@ export default function AliasesRoute(): ReactElement {
 
 	return (
 		<SimplePage
-			title={t("routes.AliasesRoute.title")}
+			title={t("title")}
 			pageOptionsActions={
 				showSearch && (
 					<Grid container spacing={2} direction="column">
@@ -146,10 +146,8 @@ export default function AliasesRoute(): ReactElement {
 										setQueryValue(event.target.value)
 									})
 								}}
-								label={t("routes.AliasesRoute.pageActions.search.label")}
+								label={t("fields.search.label", {ns: "common"})}
-								placeholder={t(
+								placeholder={t("pageActions.search.placeholder")}
-									"routes.AliasesRoute.pageActions.search.placeholder",
-								)}
 								id="search"
 								InputProps={{
 									startAdornment: (
@@ -166,9 +164,7 @@ export default function AliasesRoute(): ReactElement {
 									<Grid container spacing={1}>
 										<Grid item>
 											<Chip
-												label={t(
+												label={t("pageActions.searchFilter.active")}
-													"routes.AliasesRoute.pageActions.searchFilter.active",
-												)}
 												variant={
 													searchFilter === SearchFilter.Active
 														? "filled"
@@ -187,9 +183,7 @@ export default function AliasesRoute(): ReactElement {
 										</Grid>
 										<Grid item>
 											<Chip
-												label={t(
+												label={t("pageActions.searchFilter.inactive")}
-													"routes.AliasesRoute.pageActions.searchFilter.inactive",
-												)}
 												variant={
 													searchFilter === SearchFilter.Inactive
 														? "filled"
@@ -213,9 +207,7 @@ export default function AliasesRoute(): ReactElement {
 										<Grid item>
 											<Chip
 												icon={ALIAS_TYPE_ICON_MAP[AliasType.CUSTOM]}
-												label={t(
+												label={t("pageActions.typeFilter.custom")}
-													"routes.AliasesRoute.pageActions.typeFilter.custom",
-												)}
 												variant={
 													typeFilter === TypeFilter.Custom
 														? "filled"
@@ -235,9 +227,7 @@ export default function AliasesRoute(): ReactElement {
 										<Grid item>
 											<Chip
 												icon={ALIAS_TYPE_ICON_MAP[AliasType.RANDOM]}
-												label={t(
+												label={t("pageActions.typeFilter.random")}
-													"routes.AliasesRoute.pageActions.typeFilter.random",
-												)}
 												variant={
 													typeFilter === TypeFilter.Random
 														? "filled"
@@ -307,15 +297,14 @@ export default function AliasesRoute(): ReactElement {
 						</Grid>
 						<SuccessSnack
 							key={value}
-							message={
+							message={value && t("messages.alias.addressCopied", {ns: "common"})}
-								value &&
+						/>
-								t("relations.alias.mutations.success.addressCopiedToClipboard")
+						<ErrorSnack
-							}
+							message={error && t("messages.errors.unknown", {ns: "common"})}
 						/>
-						<ErrorSnack message={error && t("general.copyError")} />
 						<Snackbar open={isInCopyAddressMode} autoHideDuration={null}>
 							<Alert variant="standard" severity="info">
-								{t("routes.AliasesRoute.isInCopyMode")}
+								{t("isInCopyMode")}
 							</Alert>
 						</Snackbar>
 					</>