🚸 Improve UX on create user page

src/modals/delete-user/delete-user.modal.tsx

@@ -0,0 +1,45 @@
+import { Button, Group, Stack, Text } from '@mantine/core';
+import { ContextModalProps, modals } from '@mantine/modals';
+import { api } from '~/utils/api';
+
+export const DeleteUserModal = ({
+  context,
+  id,
+  innerProps,
+}: ContextModalProps<{ userId: string; username: string }>) => {
+  const apiContext = api.useContext();
+  const { isLoading, mutateAsync } = api.user.deleteUser.useMutation({
+    onSuccess: async () => {
+      await apiContext.user.getAll.invalidate();
+      modals.close(id);
+    },
+  });
+  return (
+    <Stack>
+      <Text>
+        Are you sure, that you want to delete the user {innerProps.username}? This will delete data
+        associated with this account, but not any created dashboards by this user.
+      </Text>
+
+      <Group grow>
+        <Button
+          onClick={() => {
+            modals.close(id);
+          }}
+        >
+          Cancel
+        </Button>
+        <Button
+          onClick={async () => {
+            await mutateAsync({
+              userId: innerProps.userId,
+            });
+          }}
+          disabled={isLoading}
+        >
+          Delete
+        </Button>
+      </Group>
+    </Stack>
+  );
+};

src/modals/modals.ts

@@ -0,0 +1,26 @@
+import { ChangeAppPositionModal } from '~/components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal';
+import { ChangeWidgetPositionModal } from '~/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal';
+import { EditAppModal } from '~/components/Dashboard/Modals/EditAppModal/EditAppModal';
+import { SelectElementModal } from '~/components/Dashboard/Modals/SelectElement/SelectElementModal';
+import { WidgetsEditModal } from '~/components/Dashboard/Tiles/Widgets/WidgetsEditModal';
+import { WidgetsRemoveModal } from '~/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal';
+import { CategoryEditModal } from '~/components/Dashboard/Wrappers/Category/CategoryEditModal';
+
+import { DeleteUserModal } from './delete-user/delete-user.modal';
+
+export const modals = {
+  editApp: EditAppModal,
+  selectElement: SelectElementModal,
+  integrationOptions: WidgetsEditModal,
+  integrationRemove: WidgetsRemoveModal,
+  categoryEditModal: CategoryEditModal,
+  changeAppPositionModal: ChangeAppPositionModal,
+  changeIntegrationPositionModal: ChangeWidgetPositionModal,
+  deleteUserModal: DeleteUserModal,
+};
+
+declare module '@mantine/modals' {
+  export interface MantineModalsOverride {
+    modals: typeof modals;
+  }
+}