🔀 Merge branch 'dev' into next-13

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

@@ -45,7 +45,14 @@ export const ChangePositionModal = ({
     const width = parseInt(form.values.width, 10);
     const height = parseInt(form.values.height, 10);
 
-    if (!form.values.x || !form.values.y || Number.isNaN(width) || Number.isNaN(height)) return;
+    if (
+      form.values.x === null ||
+      form.values.y === null ||
+      Number.isNaN(width) ||
+      Number.isNaN(height)
+    ) {
+      return;
+    }
 
     onSubmit(form.values.x, form.values.y, width, height);
   };

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

@@ -1,5 +1,6 @@
-import { createStyles, Flex, Tabs, TextInput } from '@mantine/core';
+import { Autocomplete, createStyles, Flex, Tabs } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
+import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';
 import { AppType } from '../../../../../../types/app';
 import { DebouncedAppIcon } from '../Shared/DebouncedAppIcon';
@@ -18,16 +19,21 @@ export const AppearanceTab = ({
 }: AppearanceTabProps) => {
   const { t } = useTranslation('layout/modals/add-app');
   const { classes } = useStyles();
+  const { isLoading, error, data } = useQuery({
+    queryKey: ['autocompleteLocale'],
+    queryFn: () => fetch('/api/getLocalImages').then((res) => res.json()),
+  });
 
   return (
     <Tabs.Panel value="appearance" pt="lg">
       <Flex gap={5}>
-        <TextInput
+        <Autocomplete
           className={classes.textInput}
           icon={<DebouncedAppIcon form={form} width={20} height={20} />}
           label={t('appearance.icon.label')}
           description={t('appearance.icon.description')}
           variant="default"
+          data={data?.files ?? []}
           withAsterisk
           required
           {...form.getInputProps('appearance.iconUrl')}

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

@@ -31,7 +31,7 @@ interface IconSelectorProps {
 }
 
 export const IconSelector = ({ onChange, allowAppNamePropagation, form }: IconSelectorProps) => {
-  const { t } = useTranslation('layout/tools');
+  const { t } = useTranslation('layout/modals/icon-picker');
 
   const { data, isLoading } = useRepositoryIconsQuery<WalkxcodeRepositoryIcon>({
     url: 'https://api.github.com/repos/walkxcode/Dashboard-Icons/contents/png',

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

@@ -50,7 +50,7 @@ export const AvailableElementTypes = ({
               {
                 id: uuidv4(),
                 // Thank you ChatGPT ;)
-                position: previousConfig.wrappers.length + 1,
+                position: previousConfig.categories.length + 1,
               },
             ],
             categories: [