refactor: consolidate English translations (#6640)

apps/nextjs/src/components/access/access-settings.tsx

@@ -3,7 +3,7 @@ import { Group, Stack, Tabs } from "@mantine/core";
 import { IconUser, IconUserDown, IconUsersGroup } from "@tabler/icons-react";
 
 import type { GroupPermissionKey } from "@homarr/definitions";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 import type { TablerIcon } from "@homarr/ui";
 import { CountBadge } from "@homarr/ui";
 
@@ -178,7 +178,7 @@ interface TabItemProps {
 }
 
 const TabItem = ({ value, icon: Icon, count }: TabItemProps) => {
-  const t = useScopedI18n("permission");
+  const t = useI18n("permission");
 
   return (
     <Tabs.Tab value={value} leftSection={<Icon stroke={1.5} size={16} />}>

apps/nextjs/src/components/access/access-table-rows.tsx

@@ -18,7 +18,7 @@ interface AccessSelectRowProps {
 }
 
 export const AccessSelectRow = ({ itemContent, permission, index, handleCountChange }: AccessSelectRowProps) => {
-  const tRoot = useI18n();
+  const tCommon = useI18n("common");
   const { icons, getSelectData } = useAccessContext();
   const form = useFormContext();
 
@@ -48,7 +48,7 @@ export const AccessSelectRow = ({ itemContent, permission, index, handleCountCha
           />
 
           <Button size="xs" variant="subtle" onClick={handleRemove}>
-            {tRoot("common.action.remove")}
+            {tCommon("action.remove")}
           </Button>
         </Flex>
       </TableTd>

apps/nextjs/src/components/access/group-access-form.tsx

@@ -3,7 +3,7 @@ import { Anchor, Button, Group, Stack, Table, TableTbody, TableTh, TableThead, T
 import { IconPlus } from "@tabler/icons-react";
 
 import { useModalAction } from "@homarr/modals";
-import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 import { Link } from "@homarr/ui";
 
 import type { AccessQueryData } from "./access-settings";
@@ -25,8 +25,8 @@ export const GroupAccessForm = <TPermission extends string>({
     new Map(accessQueryData.groups.map(({ group }) => [group.id, group])),
   );
   const { openModal } = useModalAction(GroupSelectModal);
-  const t = useI18n();
-  const tPermissions = useScopedI18n("permission");
+  const tCommon = useI18n("common");
+  const tPermissions = useI18n("permission");
   const form = useForm({
     initialValues: {
       items: accessQueryData.groups.map(({ group, permission }) => ({
@@ -80,10 +80,10 @@ export const GroupAccessForm = <TPermission extends string>({
 
           <Group justify="space-between">
             <Button rightSection={<IconPlus size="1rem" />} variant="light" onClick={handleAddUser}>
-              {t("common.action.add")}
+              {tCommon("action.add")}
             </Button>
             <Button type="submit" loading={isPending}>
-              {t("permission.action.saveGroup")}
+              {tPermissions("action.saveGroup")}
             </Button>
           </Group>
         </Stack>

apps/nextjs/src/components/access/group-select-modal.tsx

@@ -19,7 +19,8 @@ interface GroupSelectFormType {
 }
 
 export const GroupSelectModal = createModal<InnerProps>(({ actions, innerProps }) => {
-  const t = useI18n();
+  const tGroup = useI18n("group.action.select");
+  const tCommon = useI18n("common");
   const { data: groups, isPending } = clientApi.group.selectable.useQuery({
     withPermissions: innerProps.withPermissions,
   });
@@ -39,18 +40,18 @@ export const GroupSelectModal = createModal<InnerProps>(({ actions, innerProps }
     actions.closeModal();
   };
 
-  const confirmLabel = innerProps.confirmLabel ?? t("common.action.add");
+  const confirmLabel = innerProps.confirmLabel ?? tCommon("action.add");
 
   return (
     <form onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}>
       <Stack>
         <Select
           {...form.getInputProps("groupId")}
-          label={t("group.action.select.label")}
+          label={tGroup("label")}
           clearable
           searchable
           leftSection={isPending ? <Loader size="xs" /> : undefined}
-          nothingFoundMessage={t("group.action.select.notFound")}
+          nothingFoundMessage={tGroup("notFound")}
           limit={5}
           data={groups
             ?.filter((group) => !innerProps.presentGroupIds.includes(group.id))
@@ -58,7 +59,7 @@ export const GroupSelectModal = createModal<InnerProps>(({ actions, innerProps }
         />
         <Group justify="end">
           <Button variant="default" onClick={actions.closeModal}>
-            {t("common.action.cancel")}
+            {tCommon("action.cancel")}
           </Button>
           <Button type="submit" loading={loading}>
             {confirmLabel}

apps/nextjs/src/components/access/inherit-access-table.tsx

@@ -2,7 +2,7 @@ import { Stack, Table, TableTbody, TableTh, TableThead, TableTr } from "@mantine
 
 import type { GroupPermissionKey } from "@homarr/definitions";
 import { getPermissionsWithChildren } from "@homarr/definitions";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 
 import type { AccessQueryData } from "./access-settings";
 import { AccessDisplayRow } from "./access-table-rows";
@@ -19,7 +19,7 @@ export const InheritAccessTable = <TPermission extends string>({
   mapPermissions,
   fullAccessGroupPermission,
 }: InheritTableProps<TPermission>) => {
-  const tPermissions = useScopedI18n("permission");
+  const tPermissions = useI18n("permission");
   return (
     <Stack pt="sm">
       <Table>

apps/nextjs/src/components/access/user-access-form.tsx

@@ -3,7 +3,7 @@ import { Anchor, Box, Button, Group, Stack, Table, TableTbody, TableTh, TableThe
 import { IconPlus } from "@tabler/icons-react";
 
 import { useModalAction } from "@homarr/modals";
-import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 import { Link, UserAvatar } from "@homarr/ui";
 
 import type { AccessQueryData } from "./access-settings";
@@ -42,8 +42,8 @@ export const UsersAccessForm = <TPermission extends string>({
     new Map(accessQueryData.users.map(({ user }) => [user.id, user])),
   );
   const { openModal } = useModalAction(UserSelectModal);
-  const t = useI18n();
-  const tPermissions = useScopedI18n("permission");
+  const tCommon = useI18n("common");
+  const tPermissions = useI18n("permission");
   const form = useForm({
     initialValues: {
       items: accessQueryData.users.map(({ user, permission }) => ({
@@ -102,10 +102,10 @@ export const UsersAccessForm = <TPermission extends string>({
 
           <Group justify="space-between">
             <Button rightSection={<IconPlus size="1rem" />} variant="light" onClick={handleAddUser}>
-              {t("common.action.add")}
+              {tCommon("action.add")}
             </Button>
             <Button type="submit" loading={isPending}>
-              {t("permission.action.saveUser")}
+              {tPermissions("action.saveUser")}
             </Button>
           </Group>
         </Stack>

apps/nextjs/src/components/access/user-select-modal.tsx

@@ -23,7 +23,8 @@ interface UserSelectFormType {
 }
 
 export const UserSelectModal = createModal<InnerProps>(({ actions, innerProps }) => {
-  const t = useI18n();
+  const tUser = useI18n("user.action.select");
+  const tCommon = useI18n("common");
   const { data: users, isPending } = clientApi.user.selectable.useQuery({
     providers: innerProps.allowedProviders,
   });
@@ -44,7 +45,7 @@ export const UserSelectModal = createModal<InnerProps>(({ actions, innerProps })
     actions.closeModal();
   };
 
-  const confirmLabel = innerProps.confirmLabel ?? t("common.action.add");
+  const confirmLabel = innerProps.confirmLabel ?? tCommon("action.add");
   const currentUser = users?.find((user) => user.id === form.values.userId);
 
   return (
@@ -52,13 +53,13 @@ export const UserSelectModal = createModal<InnerProps>(({ actions, innerProps })
       <Stack>
         <Select
           {...form.getInputProps("userId")}
-          label={t("user.action.select.label")}
+          label={tUser("label")}
           searchable
           clearable
           leftSection={
             isPending ? <Loader size="xs" /> : currentUser ? <UserAvatar user={currentUser} size="xs" /> : undefined
           }
-          nothingFoundMessage={t("user.action.select.notFound")}
+          nothingFoundMessage={tUser("notFound")}
           renderOption={createRenderOption(users ?? [])}
           limit={5}
           data={users
@@ -67,7 +68,7 @@ export const UserSelectModal = createModal<InnerProps>(({ actions, innerProps })
         />
         <Group justify="end">
           <Button variant="default" onClick={actions.closeModal}>
-            {t("common.action.cancel")}
+            {tCommon("action.cancel")}
           </Button>
           <Button type="submit" loading={loading}>
             {confirmLabel}