🔀 Merge branch 'dev' into feature/add-basic-authentication

src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx

@@ -47,14 +47,14 @@ export const EditAppModal = ({
   const form = useForm<AppType>({
     initialValues: innerProps.app,
     validate: {
-      name: (name) => (!name ? 'Name is required' : null),
+      name: (name) => (!name ? t('validation.name') : null),
       url: (url) => {
         if (!url) {
-          return 'Url is required';
+          return t('validation.noUrl');
         }
 
         if (!url.match(appUrlRegex)) {
-          return 'Value is not a valid url';
+          return t('validation.invalidUrl');
         }
 
         return null;
@@ -62,7 +62,7 @@ export const EditAppModal = ({
       appearance: {
         iconUrl: (url: string) => {
           if (url.length < 1) {
-            return 'This field is required';
+            return t('validation.noIconUrl');
           }
 
           return null;
@@ -71,11 +71,11 @@ export const EditAppModal = ({
       behaviour: {
         externalUrl: (url: string) => {
           if (url === undefined || url.length < 1) {
-            return 'External URI is required';
+            return t('validation.noExternalUri');
           }
 
           if (!url.match(appUrlWithAnyProtocolRegex)) {
-            return 'External URI is not a valid uri';
+            return t('validation.invalidExternalUri');
           }
 
           return null;

src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx

@@ -33,12 +33,12 @@ export const AvailableElementTypes = ({
   const onClickCreateCategory = async () => {
     openContextModalGeneric<CategoryEditModalInnerProps>({
       modal: 'categoryEditModal',
-      title: 'Name of new category',
+      title: t('category.newName'),
       withCloseButton: false,
       innerProps: {
         category: {
           id: uuidv4(),
-          name: 'New category',
+          name: t('category.defaultName'),
           position: 0, // doesn't matter, is being overwritten
         },
         onSuccess: async (category) => {
@@ -65,8 +65,8 @@ export const AvailableElementTypes = ({
           })).then(() => {
             closeModal(modalId);
             showNotification({
-              title: 'Category created',
-              message: `The category ${category.name} has been created`,
+              title: t('category.created.title'),
+              message: t('category.created.message', { name: category.name}),
               color: 'teal',
             });
           });
@@ -81,7 +81,7 @@ export const AvailableElementTypes = ({
       <Space h="lg" />
       <Group spacing="md" grow>
         <ElementItem
-          name="Apps"
+          name={t('apps')}
           icon={<IconBox size={40} strokeWidth={1.3} />}
           onClick={() => {
             openContextModalGeneric<{ app: AppType; allowAppNamePropagation: boolean }>({
@@ -89,7 +89,7 @@ export const AvailableElementTypes = ({
               innerProps: {
                 app: {
                   id: uuidv4(),
-                  name: 'Your app',
+                  name: t('app.defaultName'),
                   url: 'https://homarr.dev',
                   appearance: {
                     iconUrl: '/imgs/logo/logo.png',
@@ -126,12 +126,12 @@ export const AvailableElementTypes = ({
           }}
         />
         <ElementItem
-          name="Widgets"
+          name={t('widgets')}
           icon={<IconStack size={40} strokeWidth={1.3} />}
           onClick={onOpenWidgets}
         />
         <ElementItem
-          name="Category"
+          name={t('categories')}
           icon={<IconBoxAlignTop size={40} strokeWidth={1.3} />}
           onClick={onClickCreateCategory}
         />

src/components/Dashboard/Wrappers/Category/CategoryEditMenu.tsx

@@ -12,6 +12,7 @@ import {
 import { useConfigContext } from '../../../../config/provider';
 import { CategoryType } from '../../../../types/category';
 import { useCategoryActions } from './useCategoryActions';
+import { useTranslation } from 'next-i18next';
 
 interface CategoryEditMenuProps {
   category: CategoryType;
@@ -21,6 +22,7 @@ export const CategoryEditMenu = ({ category }: CategoryEditMenuProps) => {
   const { name: configName } = useConfigContext();
   const { addCategoryAbove, addCategoryBelow, moveCategoryUp, moveCategoryDown, edit, remove } =
     useCategoryActions(configName, category);
+  const { t } = useTranslation(['layout/common','common']);
 
   return (
     <Menu withinPortal withArrow>
@@ -31,24 +33,28 @@ export const CategoryEditMenu = ({ category }: CategoryEditMenuProps) => {
       </Menu.Target>
       <Menu.Dropdown>
         <Menu.Item icon={<IconEdit size={20} />} onClick={edit}>
-          Edit
+        {t('common:edit')}
         </Menu.Item>
         <Menu.Item icon={<IconTrash size={20} />} onClick={remove}>
-          Remove
+          {t('common:remove')}
         </Menu.Item>
-        <Menu.Label>Change positon</Menu.Label>
+        <Menu.Label>
+          {t('common:changePosition')}
+        </Menu.Label>
         <Menu.Item icon={<IconTransitionTop size={20} />} onClick={moveCategoryUp}>
-          Move up
+          {t('menu.moveUp')}
         </Menu.Item>
         <Menu.Item icon={<IconTransitionBottom size={20} />} onClick={moveCategoryDown}>
-          Move down
+          {t('menu.moveDown')}
         </Menu.Item>
-        <Menu.Label>Add category</Menu.Label>
+        <Menu.Label>
+          {t('menu.addCategory')}
+        </Menu.Label>
         <Menu.Item icon={<IconRowInsertTop size={20} />} onClick={addCategoryAbove}>
-          Add category above
+          {t('menu.addCategory') + ' ' + t('menu.addAbove')}
         </Menu.Item>
         <Menu.Item icon={<IconRowInsertBottom size={20} />} onClick={addCategoryBelow}>
-          Add category below
+          {t('menu.addCategory') + ' ' + t('menu.addBelow')}
         </Menu.Item>
       </Menu.Dropdown>
     </Menu>

src/components/layout/header/About/AboutModal.tsx

@@ -53,10 +53,10 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
   const { t } = useTranslation(['common', 'layout/modals/about']);
 
   const keybinds = [
-    { key: 'Mod + J', shortcut: 'Toggle light/dark mode' },
-    { key: 'Mod + K', shortcut: 'Focus on search bar' },
-    { key: 'Mod + B', shortcut: 'Open docker widget' },
-    { key: 'Mod + E', shortcut: 'Toggle Edit mode' },
+    { key: 'Mod + J', shortcut: t('layout/modals/about:actions.toggleTheme') },
+    { key: 'Mod + K', shortcut: t('layout/modals/about:actions.focusSearchBar') },
+    { key: 'Mod + B', shortcut: t('layout/modals/about:actions.openDocker') },
+    { key: 'Mod + E', shortcut: t('layout/modals/about:actions.toggleEdit') },
   ];
   const rows = keybinds.map((element) => (
     <tr key={element.key}>