Fix Mantine v9 API breakage in Collapse, Grid and modal types

frontend/src/App/Navbar.tsx

@@ -209,9 +209,9 @@ const RouteItem: FunctionComponent<{
               }
             }}
           ></NavbarItem>
-          <Collapse hidden={children.length === 0} expanded={isOpen}>
-            {elements}
-          </Collapse>
+          {children.length > 0 && (
+            <Collapse in={isOpen}>{elements}</Collapse>
+          )}
         </Stack>
       );
     } else {

frontend/src/App/NotificationDrawer.tsx

@@ -233,7 +233,7 @@ const NotificationDrawer: FunctionComponent<NotificationDrawerProps> = ({
                         </Text>
                       </Group>
 
-                      <Collapse expanded={!collapsedSections[status]}>
+                      <Collapse in={!collapsedSections[status]}>
                         <Stack>
                           {grouped[status as string]
                             .slice()

frontend/src/components/modals/ManualSearchModal.tsx

@@ -76,7 +76,7 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) {
               ></FontAwesomeIcon>
             )}
           </Text>
-          <Collapse expanded={open}>
+          <Collapse in={open}>
             <>{items}</>
           </Collapse>
         </Stack>
@@ -230,7 +230,7 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) {
         <Divider hidden={!bSceneNameAvailable} my="xs"></Divider>
         <Code hidden={!bSceneNameAvailable}>{item?.sceneName}</Code>
       </Alert>
-      <Collapse expanded={haveResult && !results.isFetching}>
+      <Collapse in={haveResult && !results.isFetching}>
         <PageTable
           autoScroll={false}
           tableStyles={{ emptyText: "No result", placeholder: 10 }}

frontend/src/modules/modals/WithModal.tsx

@@ -1,6 +1,7 @@
 import { createContext, FunctionComponent } from "react";
-import { ContextModalProps } from "@mantine/modals";
-import { ModalSettings } from "@mantine/modals";
+import { ContextModalProps, openModal } from "@mantine/modals";
+
+type ModalSettings = Parameters<typeof openModal>[0];
 
 export type ModalComponent<P extends Record<string, unknown> = {}> =
   FunctionComponent<ContextModalProps<P>> & {

frontend/src/modules/modals/hooks.ts

@@ -1,8 +1,9 @@
 import { useCallback, useContext, useMemo } from "react";
-import { useModals as useMantineModals } from "@mantine/modals";
-import { ModalSettings } from "@mantine/modals";
+import { openModal, useModals as useMantineModals } from "@mantine/modals";
 import { ModalComponent, ModalIdContext } from "./WithModal";
 
+type ModalSettings = Parameters<typeof openModal>[0];
+
 export function useModals() {
   const { openContextModal: openMantineContextModal, ...rest } =
     useMantineModals();

frontend/src/pages/Settings/components/collapse.tsx

@@ -31,7 +31,7 @@ const CollapseBox: FunctionComponent<Props> = ({
 
   return (
     <Collapse
-      expanded={open}
+      in={open}
       pl={indent ? "md" : undefined}
       transitionDuration={0}
     >

frontend/src/pages/views/ItemOverview.tsx

@@ -141,7 +141,7 @@ const ItemOverview: FunctionComponent<Props> = (props) => {
       <Grid
         align="flex-start"
         grow
-        gap="xs"
+        gutter="xs"
         p={24}
         m={0}
         style={{