Adding some translations

public/locales/en/layout/element-selector/selector.json

@@ -4,6 +4,7 @@
         "text": "Tiles are the main element of homarr. They allow you to configure the dashboard and display the information you want."
     },
     "widgetDescription": "Widgets interact with your apps, to provide you with more control over your applications. They usually require a few configurations before use.",
+    "goBack": "Go back to the previous step",
     "actionIcon": {
         "tooltip": "Add a tile"
     }

public/locales/en/layout/header/actions/toggle-edit-mode.json

@@ -1,5 +1,6 @@
 {
     "tooltip": "The edit mode enables you to configure your dashboard",
+    "description": "In edit mode, you can adjust the size and position of your tiles.",
     "button": {
         "disabled": "Enter Edit Mode",
         "enabled": "Exit and Save"

public/locales/en/layout/modals/change-position.json

@@ -0,0 +1,8 @@
+{
+	"xPosition": "X axis position",
+	"width": "Width",
+	"height": "Height",
+	"yPosition": "Y axis position",
+	"zeroOrHigher": "0 or higher",
+	"betweenXandY": "Between {{mim}} and {{max}}"
+}

public/locales/en/layout/tools.json

@@ -1,5 +1,10 @@
 {
     "fallback": {
         "title": "You currently do not have any tools"
+    },
+    "iconPicker": {
+        "textInputPlaceholder": "Search for icons...",
+        "searchLimitationTitle": "Search is limited to {{max}} icons",
+        "searchLimitationMessage": "To keep things snappy and fast, the search is limited to {{max}} icons. Use the search box to find more icons"
     }
 }

src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx

@@ -45,7 +45,7 @@ export const ChangePositionModal = ({
     onSubmit(form.values.x, form.values.y, form.values.width, form.values.height);
   };
 
-  const { t } = useTranslation('common');
+  const { t } = useTranslation(['layout/modals/change-position', 'common']);
 
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
@@ -54,8 +54,8 @@ export const ChangePositionModal = ({
           <NumberInput
             max={99}
             min={0}
-            label="X Position"
+            label={t('xPosition')}
-            description="0 or higher"
+            description={t('layout/modals/change-position:zeroOrHigher')}
             {...form.getInputProps('x')}
           />
         </Grid.Col>
@@ -64,8 +64,8 @@ export const ChangePositionModal = ({
           <NumberInput
             max={99}
             min={0}
-            label="Y Position"
+            label={t('layout/modals/change-position:yPosition')}
-            description="0 or higher"
+            description={t('layout/modals/change-position:zeroOrHigher')}
             {...form.getInputProps('y')}
           />
         </Grid.Col>
@@ -77,8 +77,11 @@ export const ChangePositionModal = ({
             data={widthData}
             max={24}
             min={1}
-            label="Width"
+            label={t('layout/modals/change-position:width')}
-            description={`Between ${widthData.at(0)?.label} and ${widthData.at(-1)?.label}`}
+            description={t('layout/modals/change-position:betweenXandY', {
+              min: widthData.at(0)?.label,
+              max: widthData.at(-1)?.label,
+            })}
             {...form.getInputProps('width')}
           />
         </Grid.Col>
@@ -88,8 +91,11 @@ export const ChangePositionModal = ({
             data={heightData}
             max={24}
             min={1}
-            label="Height"
+            label={t('layout/modals/change-position:height')}
-            description={`Between ${heightData.at(0)?.label} and ${heightData.at(-1)?.label}`}
+            description={t('layout/modals/change-position:betweenXandY', {
+              min: heightData.at(0)?.label,
+              max: heightData.at(-1)?.label,
+            })}
             {...form.getInputProps('height')}
           />
         </Grid.Col>
@@ -97,9 +103,9 @@ export const ChangePositionModal = ({
 
       <Flex justify="end" gap="sm" mt="md">
         <Button onClick={() => onCancel()} variant="light" color="gray">
-          {t('cancel')}
+          {t('common:cancel')}
         </Button>
-        <Button type="submit">{t('save')}</Button>
+        <Button type="submit">{t('common:save')}</Button>
       </Flex>
     </form>
   );

src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/IconSelector/IconSelector.tsx

@@ -17,6 +17,7 @@ import { UseFormReturnType } from '@mantine/form';
 import { useDebouncedValue } from '@mantine/hooks';
 import { IconSearch, IconX } from '@tabler/icons';
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'next-i18next';
 import { ICON_PICKER_SLICE_LIMIT } from '../../../../../../../../data/constants';
 import { IconSelectorItem } from '../../../../../../../types/iconSelector/iconSelectorItem';
 import { WalkxcodeRepositoryIcon } from '../../../../../../../types/iconSelector/repositories/walkxcodeIconRepository';
@@ -72,6 +73,8 @@ export const IconSelector = ({ onChange, allowAppNamePropagation, form }: IconSe
   const isTruncated =
     slicedFilteredItems.length > 0 && slicedFilteredItems.length !== filteredItems.length;
 
+  const { t } = useTranslation('layout/tools');
+
   return (
     <Popover width={310}>
       <Popover.Target>
@@ -88,7 +91,7 @@ export const IconSelector = ({ onChange, allowAppNamePropagation, form }: IconSe
           <TextInput
             value={searchTerm}
             onChange={(event) => setSearchTerm(event.currentTarget.value)}
-            placeholder="Search for icons..."
+            placeholder={t('iconPicker.textInputPlaceholder')}
             variant="filled"
             rightSection={
               <ActionIcon onClick={() => setSearchTerm('')}>
@@ -110,11 +113,10 @@ export const IconSelector = ({ onChange, allowAppNamePropagation, form }: IconSe
               <Stack spacing="xs" pr={15}>
                 <Divider mt={35} mx="xl" />
                 <Title order={6} color="dimmed" align="center">
-                  Search is limited to {ICON_PICKER_SLICE_LIMIT} icons
+                  {t('iconPicker.searchLimitationTitle', { max: ICON_PICKER_SLICE_LIMIT })}
                 </Title>
                 <Text color="dimmed" align="center" size="sm">
-                  To keep things snappy and fast, the search is limited to {ICON_PICKER_SLICE_LIMIT}{' '}
+                  {t('iconPicker.searchLimitationMessage', { max: ICON_PICKER_SLICE_LIMIT })}
-                  icons. Use the search box to find more icons.
                 </Text>
               </Stack>
             )}

src/components/Dashboard/Modals/SelectElement/Components/Shared/SelectorBackArrow.tsx

@@ -1,19 +1,23 @@
 import { Button, Text } from '@mantine/core';
 import { IconArrowNarrowLeft } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
 
 interface SelectorBackArrowProps {
   onClickBack: () => void;
 }
 
-export const SelectorBackArrow = ({ onClickBack }: SelectorBackArrowProps) => (
+export function SelectorBackArrow({ onClickBack }: SelectorBackArrowProps) {
-  <Button
+  const { t } = useTranslation('layout/element-selector/selector');
-    leftIcon={<IconArrowNarrowLeft />}
+  return (
-    onClick={onClickBack}
+    <Button
-    styles={{ inner: { width: 'fit-content' } }}
+      leftIcon={<IconArrowNarrowLeft />}
-    fullWidth
+      onClick={onClickBack}
-    variant="default"
+      styles={{ inner: { width: 'fit-content' } }}
-    mb="md"
+      fullWidth
-  >
+      variant="default"
-    <Text>See all available elements</Text>
+      mb="md"
-  </Button>
+    >
-);
+      <Text>{t('goBack')}</Text>
+    </Button>
+  );
+}

src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx

@@ -126,41 +126,3 @@ export const WidgetsEditModal = ({
     </Stack>
   );
 };
-
-//     <Stack>
-//       {items.map(([key, value]) => (
-//         <>
-//           {typeof value === 'boolean' ? (
-//             <Switch
-//               label={t(`descriptor.settings.${key}.label`)}
-//               checked={value}
-//               onChange={(ev) => handleChange(key, ev.currentTarget.checked)}
-//             />
-//           ) : null}
-//           {typeof value === 'string' ? (
-//             <TextInput
-//               label={t(`descriptor.settings.${key}.label`)}
-//               value={value}
-//               onChange={(ev) => handleChange(key, ev.currentTarget.value)}
-//             />
-//           ) : null}
-//           {typeof value === 'object' && Array.isArray(value) ? (
-// <MultiSelect
-//   data={getMutliselectData(key)}
-//   label={t(`descriptor.settings.${key}.label`)}
-//   value={value}
-//   onChange={(v) => handleChange(key, v)}
-// />
-//           ) : null}
-//         </>
-//       ))}
-
-//       <Group position="right">
-//         <Button onClick={() => context.closeModal(id)} variant="light">
-//           {t('common:cancel')}
-//         </Button>
-//         <Button onClick={handleSave}>{t('common:save')}</Button>
-//       </Group>
-//     </Stack>
-//   );
-// };

src/components/Dashboard/Views/ViewToggleButton.tsx

@@ -10,15 +10,7 @@ export const ViewToggleButton = () => {
   const { t } = useTranslation('layout/header/actions/toggle-edit-mode');
 
   return (
-    <Tooltip
+    <Tooltip width={100} label={<Text align="center">{t('description')}</Text>}>
-      label={
-        <Text align="center">
-          In edit mode, you can adjust
-          <br />
-          the size and position of your tiles.
-        </Text>
-      }
-    >
       {screenLargerThanMd ? (
         <Button
           variant={isEditMode ? 'filled' : 'default'}

src/tools/translation-namespaces.ts

@@ -3,6 +3,7 @@ export const dashboardNamespaces = [
   'layout/tools',
   'layout/element-selector/selector',
   'layout/modals/add-app',
+  'layout/modals/change-position',
   'layout/modals/about',
   'layout/header/actions/toggle-edit-mode',
   'settings/common',