✨ Add i18n namespaces and add translations for manage boards

public/locales/en/boards/manage.json

@@ -0,0 +1,28 @@
+{
+    "title": "Boards",
+    "cards": {
+        "statistics": {
+            "apps": "Apps",
+            "widgets": "Widgets",
+            "categories": "Categories"
+        },
+        "buttons": {
+            "view": "View board"
+        },
+        "menu": {
+            "setAsDefault": "Set as your default board",
+            "delete": {
+                "label": "Delete permanently",
+                "disabled": "Deletion disabled, because older Homarr components still rely on this.",
+                "modalTitle": "Delete board"
+            }
+        },
+        "badges": {
+            "fileSystem": "File system",
+            "default": "Default"
+        }
+    },
+    "buttons": {
+        "create": "Create new dashboard"
+    }
+}

src/i18n.d.ts

@@ -0,0 +1,71 @@
+import 'i18next';
+
+import authInvite from '../public/locales/en/authentication/invite.json';
+import authLogin from '../public/locales/en/authentication/login.json';
+import manageBoards from '../public/locales/en/boards/manage.json';
+import common from '../public/locales/en/common.json';
+import layout from '../public/locales/en/layout/common.json';
+import layoutElementSelector from '../public/locales/en/layout/element-selector/selector.json';
+import layoutHeader from '../public/locales/en/layout/header.json';
+import layoutToggleEditMode from '../public/locales/en/layout/header/actions/toggle-edit-mode.json';
+import layoutMobileDrawer from '../public/locales/en/layout/mobile/drawer.json';
+import layoutModalAbout from '../public/locales/en/layout/modals/about.json';
+import layoutModalAddApp from '../public/locales/en/layout/modals/add-app.json';
+import layoutModalChangePosition from '../public/locales/en/layout/modals/change-position.json';
+import moduleBookmark from '../public/locales/en/modules/bookmark.json';
+import moduleCalendar from '../public/locales/en/modules/calendar.json';
+import moduleMediaCards from '../public/locales/en/modules/common-media-cards.json';
+import moduleCommon from '../public/locales/en/modules/common.json';
+import moduleDashDot from '../public/locales/en/modules/dashdot.json';
+import moduleDate from '../public/locales/en/modules/date.json';
+import moduleDownload from '../public/locales/en/modules/dlspeed.json';
+import moduleDnsHoleControls from '../public/locales/en/modules/dns-hole-controls.json';
+import moduleDnsHoleSummary from '../public/locales/en/modules/dns-hole-summary.json';
+import moduleDocker from '../public/locales/en/modules/docker.json';
+import moduleIframe from '../public/locales/en/modules/iframe.json';
+import moduleMediaRequests from '../public/locales/en/modules/media-requests-list.json';
+import moduleMediaRequestsStats from '../public/locales/en/modules/media-requests-stats.json';
+import moduleMediaServer from '../public/locales/en/modules/media-server.json';
+import moduleOverseerr from '../public/locales/en/modules/overseerr.json';
+import modulePing from '../public/locales/en/modules/ping.json';
+import moduleRss from '../public/locales/en/modules/rss.json';
+import moduleSearch from '../public/locales/en/modules/search.json';
+import moduleTorrentStatus from '../public/locales/en/modules/torrents-status.json';
+import moduleUsenet from '../public/locales/en/modules/usenet.json';
+import moduleVideoStream from '../public/locales/en/modules/video-stream.json';
+import moduleWeather from '../public/locales/en/modules/weather.json';
+import settingsCommon from '../public/locales/en/settings/common.json';
+import settingsAppWidth from '../public/locales/en/settings/customization/app-width.json';
+import settingsColorSelector from '../public/locales/en/settings/customization/color-selector.json';
+import settingsGeneral from '../public/locales/en/settings/customization/general.json';
+import settingsGridstack from '../public/locales/en/settings/customization/gridstack.json';
+import settingsOpacitySelector from '../public/locales/en/settings/customization/opacity-selector.json';
+import settingsPageAppearance from '../public/locales/en/settings/customization/page-appearance.json';
+import settingsShadeSelector from '../public/locales/en/settings/customization/shade-selector.json';
+import settingsColorSchema from '../public/locales/en/settings/general/color-schema.json';
+import settingsConfigChanger from '../public/locales/en/settings/general/config-changer.json';
+import settingsInternationalization from '../public/locales/en/settings/general/internationalization.json';
+import settingsSearchEngine from '../public/locales/en/settings/general/search-engine.json';
+import settingsThemeSelector from '../public/locales/en/settings/general/theme-selector.json';
+import settingsWidgetPositions from '../public/locales/en/settings/general/widget-positions.json';
+import userPreferences from '../public/locales/en/user/preferences.json';
+import widgetsDraggableList from '../public/locales/en/widgets/draggable-list.json';
+import widgetsErrorBoundary from '../public/locales/en/widgets/error-boundary.json';
+import widgetsLocation from '../public/locales/en/widgets/location.json';
+import zod from '../public/locales/en/zod.json';
+
+declare module 'i18next' {
+  // Extend CustomTypeOptions
+  interface CustomTypeOptions {
+    // custom namespace type, if you changed it
+    defaultNS: 'ns1';
+    // custom resources type
+    resources: {
+      common: typeof common;
+      zod: typeof zod;
+      'authentication/invite': typeof authInvite;
+      'boards/manage': typeof manageBoards;
+    };
+    // other
+  }
+}

src/pages/manage/boards/index.tsx

@@ -28,10 +28,12 @@ import {
 import { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import Link from 'next/link';
+import { useTranslation } from 'next-i18next';
 import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
 import { getServerAuthSession } from '~/server/auth';
 import { sleep } from '~/tools/client/time';
 import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
+import { manageNamespaces } from '~/tools/server/translation-namespaces';
 import { api } from '~/utils/api';
 
 const BoardsPage = () => {
@@ -45,27 +47,29 @@ const BoardsPage = () => {
 
   const [deletingDashboards, { append, filter }] = useListState<string>([]);
 
+  const { t } = useTranslation('boards/manage');
+
   return (
     <ManageLayout>
       <Head>
         <title>Boards • Homarr</title>
       </Head>
 
-      <Title mb="xl">Boards</Title>
+      <Title mb="xl">{t('title')}</Title>
 
       <Flex justify="end" mb="md">
         <Button
           onClick={() => {
             modals.openContextModal({
               modal: 'createDashboardModal',
-              title: <Text>Create new board</Text>,
+              title: <Text>{t('buttons.create')}</Text>,
               innerProps: {},
             });
           }}
           leftIcon={<IconPlus size="1rem" />}
           variant="default"
         >
-          Create new board
+          {t('buttons.create')}
         </Button>
       </Flex>
 
@@ -92,7 +96,7 @@ const BoardsPage = () => {
                     color="pink"
                     variant="light"
                   >
-                    Filesystem
+                    {t('cards.badges.fileSystem')}
                   </Badge>
                   {board.isDefaultForUser && (
                     <Badge
@@ -100,7 +104,7 @@ const BoardsPage = () => {
                       color="yellow"
                       variant="light"
                     >
-                      Default
+                      {t('cards.badges.default')}
                     </Badge>
                   )}
                 </Group>
@@ -110,7 +114,7 @@ const BoardsPage = () => {
                 <Group position="apart">
                   <Group spacing="xs">
                     <IconBox opacity={0.7} size="1rem" />
-                    <Text color="dimmed">Apps</Text>
+                    <Text color="dimmed">{t('cards.statistics.apps')}</Text>
                   </Group>
                   <Text>{board.countApps}</Text>
                 </Group>
@@ -118,7 +122,7 @@ const BoardsPage = () => {
                 <Group position="apart">
                   <Group spacing="xs">
                     <IconStack opacity={0.7} size="1rem" />
-                    <Text color="dimmed">Widgets</Text>
+                    <Text color="dimmed">{t('cards.statistics.widgets')}</Text>
                   </Group>
                   <Text>{board.countWidgets}</Text>
                 </Group>
@@ -126,7 +130,7 @@ const BoardsPage = () => {
                 <Group position="apart">
                   <Group spacing="xs">
                     <IconCategory opacity={0.7} size="1rem" />
-                    <Text color="dimmed">Categories</Text>
+                    <Text color="dimmed">{t('cards.statistics.categories')}</Text>
                   </Group>
                   <Text>{board.countCategories}</Text>
                 </Group>
@@ -141,7 +145,7 @@ const BoardsPage = () => {
                   radius="md"
                   href={`/board/${board.name}`}
                 >
-                  View dashboard
+                  {t('cards.buttons.view')}
                 </Button>
                 <Menu width={240} withinPortal>
                   <Menu.Target>
@@ -158,14 +162,14 @@ const BoardsPage = () => {
                         });
                       }}
                     >
-                      <Text size="sm">Set as your default board</Text>
+                      <Text size="sm">{t('cards.menu.setAsDefault')}</Text>
                     </Menu.Item>
                     <Menu.Divider />
                     <Menu.Item
                       onClick={async () => {
                         modals.openContextModal({
                           modal: 'deleteBoardModal',
-                          title: <Text weight={500}>Delete board</Text>,
+                          title: <Text weight={500}>{t('cards.menu.delete.modalTitle')}</Text>,
                           innerProps: {
                             boardName: board.name,
                             onConfirm: async () => {
@@ -181,11 +185,9 @@ const BoardsPage = () => {
                       icon={<IconTrash size="1rem" />}
                       color="red"
                     >
-                      <Text size="sm">Permanently delete</Text>
+                      <Text size="sm">{t('cards.menu.delete.label')}</Text>
                       {board.name === 'default' && (
-                        <Text size="xs">
+                        <Text size="xs">{t('cards.menu.delete.disabled')}</Text>
-                          Deletion disabled, because older Homarr components still rely on this.
-                        </Text>
                       )}
                     </Menu.Item>
                   </Menu.Dropdown>
@@ -209,7 +211,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
   }
 
   const translations = await getServerSideTranslations(
-    ['common'],
+    manageNamespaces,
     ctx.locale,
     undefined,
     undefined

src/tools/server/translation-namespaces.ts

@@ -48,7 +48,7 @@ export const dashboardNamespaces = [
   'widgets/location',
 ];
 
-export const manageNamespaces = ['user/preferences', 'zod'];
+export const manageNamespaces = ['user/preferences', 'boards/manage', 'zod'];
 
 export const loginNamespaces = ['authentication/login', 'zod'];