From f358c33bd37e581d7a3ce02f527eb499f8ae4b85 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Sun, 16 Jun 2024 22:10:17 +0200
Subject: [PATCH] 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   |  6 +++---
 .../nextjs/src/app/[locale]/manage/apps/new/page.tsx |  8 ++++++--
 apps/nextjs/src/app/[locale]/manage/apps/page.tsx    |  7 ++++---
 .../src/components/icons/picker/icon-picker.tsx      |  2 +-
 packages/translation/src/lang/en.ts                  | 12 ++++++++++++
 5 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/manage/apps/_form.tsx b/apps/nextjs/src/app/[locale]/manage/apps/_form.tsx
index 2cb6b6a47..2cf9bf9b3 100644
--- a/apps/nextjs/src/app/[locale]/manage/apps/_form.tsx
+++ b/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">
diff --git a/apps/nextjs/src/app/[locale]/manage/apps/new/page.tsx b/apps/nextjs/src/app/[locale]/manage/apps/new/page.tsx
index 5087a5b66..5734c9f0e 100644
--- a/apps/nextjs/src/app/[locale]/manage/apps/new/page.tsx
+++ b/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>
diff --git a/apps/nextjs/src/app/[locale]/manage/apps/page.tsx b/apps/nextjs/src/app/[locale]/manage/apps/page.tsx
index 6aab6ae37..bdac7a8a9 100644
--- a/apps/nextjs/src/app/[locale]/manage/apps/page.tsx
+++ b/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 />}
diff --git a/apps/nextjs/src/components/icons/picker/icon-picker.tsx b/apps/nextjs/src/components/icons/picker/icon-picker.tsx
index f963fda7a..ae11cd00a 100644
--- a/apps/nextjs/src/components/icons/picker/icon-picker.tsx
+++ b/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>
 
diff --git a/packages/translation/src/lang/en.ts b/packages/translation/src/lang/en.ts
index 61251cd61..8468fe44e 100644
--- a/packages/translation/src/lang/en.ts
+++ b/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: {