fix: missing translations for apps / integrations #438 (#674)

* fix: missing translations for apps / integrations #438

* chore: remove unnecessary property from integration new dropdown

apps/nextjs/src/app/[locale]/manage/apps/_form.tsx

@@ -36,10 +36,10 @@ export const AppForm = (props: AppFormProps) => {
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
       <Stack>
-        <TextInput {...form.getInputProps("name")} withAsterisk label="Name" />
+        <TextInput {...form.getInputProps("name")} withAsterisk label={t("app.field.name.label")} />
         <IconPicker initialValue={initialValues?.iconUrl} {...form.getInputProps("iconUrl")} />
-        <Textarea {...form.getInputProps("description")} label="Description" />
-        <TextInput {...form.getInputProps("href")} label="URL" />
+        <Textarea {...form.getInputProps("description")} label={t("app.field.description.label")} />
+        <TextInput {...form.getInputProps("href")} label={t("app.field.url.label")} />
 
         <Group justify="end">
           <Button variant="default" component={Link} href="/manage/apps">

apps/nextjs/src/app/[locale]/manage/apps/new/page.tsx

@@ -1,12 +1,16 @@
 import { Container, Stack, Title } from "@mantine/core";
 
+import { getI18n } from "@homarr/translation/server";
+
 import { AppNewForm } from "./_app-new-form";
 
-export default function AppNewPage() {
+export default async function AppNewPage() {
+  const t = await getI18n();
+
   return (
     <Container>
       <Stack>
-        <Title>New app</Title>
+        <Title>{t("app.page.create.title")}</Title>
         <AppNewForm />
       </Stack>
     </Container>

apps/nextjs/src/app/[locale]/manage/apps/page.tsx

@@ -16,20 +16,21 @@ import { IconApps, IconPencil } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
-import { getI18n } from "@homarr/translation/server";
+import { getI18n, getScopedI18n } from "@homarr/translation/server";
 
 import { AppDeleteButton } from "./_app-delete-button";
 
 export default async function AppsPage() {
   const apps = await api.app.all();
+  const t = await getScopedI18n("app");
 
   return (
     <Container>
       <Stack>
         <Group justify="space-between" align="center">
-          <Title>Apps</Title>
+          <Title>{t("page.list.title")}</Title>
           <Button component={Link} href="/manage/apps/new">
-            New app
+            {t("page.create.title")}
           </Button>
         </Group>
         {apps.length === 0 && <AppNoResults />}

apps/nextjs/src/components/icons/picker/icon-picker.tsx

@@ -83,7 +83,7 @@ export const IconPicker = ({ initialValue, onChange, error, onFocus, onBlur }: I
           rightSectionPointerEvents="none"
           withAsterisk
           error={error}
-          label="Icon URL"
+          label={t("iconPicker.label")}
         />
       </Combobox.Target>
 

packages/translation/src/lang/en.ts

@@ -317,6 +317,17 @@ export default {
         },
       },
     },
+    field: {
+      name: {
+        label: "Name",
+      },
+      description: {
+        label: "Description",
+      },
+      url: {
+        label: "Url",
+      },
+    },
   },
   integration: {
     page: {
@@ -453,6 +464,7 @@ export default {
       tryAgain: "Try again",
     },
     iconPicker: {
+      label: "Icon URL",
       header: "Type name or objects to filter for icons... Homarr will search through {countIcons} icons for you.",
     },
     information: {