migrate to mantine v9

src/renderer/components/item-list/item-grid-list/item-grid-list.tsx

@@ -385,8 +385,8 @@ const BaseItemGridList = ({
     rows,
     size = 'default',
 }: ItemGridListProps) => {
-    const rootRef = useRef(null);
-    const outerRef = useRef(null);
+    const rootRef = useRef<HTMLDivElement | null>(null);
+    const outerRef = useRef<HTMLDivElement | null>(null);
     const listRef = useRef<FixedSizeList<GridItemProps>>(null);
     const { ref: containerRef, width: containerWidth } = useElementSize();
     const { focused, ref: containerFocusRef } = useFocusWithin();
@@ -486,7 +486,7 @@ const BaseItemGridList = ({
     }, [itemsPerRow, rows?.length, size]);
 
     useLayoutEffect(() => {
-        const { current: container } = containerRef;
+        const container = rootRef.current;
         if (!container) return;
 
         throttledSetTableMeta(containerWidth, resolvedItemCount, (meta) => {
@@ -500,13 +500,15 @@ const BaseItemGridList = ({
                 current.rowCount !== meta.rowCount
             ) {
                 tableMetaRef.current = meta;
-                container.style.setProperty('--grid-column-count', String(meta.columnCount));
-                container.style.setProperty('--grid-item-height', `${meta.itemHeight}px`);
-                container.style.setProperty('--grid-row-count', String(meta.rowCount));
+                const el = rootRef.current;
+                if (!el) return;
+                el.style.setProperty('--grid-column-count', String(meta.columnCount));
+                el.style.setProperty('--grid-item-height', `${meta.itemHeight}px`);
+                el.style.setProperty('--grid-row-count', String(meta.rowCount));
                 setTableMetaVersion((v) => v + 1);
             }
         });
-    }, [containerWidth, resolvedItemCount, throttledSetTableMeta, containerRef]);
+    }, [containerWidth, resolvedItemCount, throttledSetTableMeta]);
 
     const controls = useDefaultItemListControls({
         enableMultiSelect,

src/renderer/features/artists/components/album-artist-detail-content.tsx

@@ -1214,7 +1214,7 @@ export const AlbumArtistDetailContent = ({
                     artistSongsLink={artistSongsLink}
                     onArtistRadio={handleArtistRadio}
                 />
-                <Grid gutter="2xl">
+                <Grid gap="2xl">
                     <AlbumArtistMetadataGenres
                         genres={detailQuery.data?.genres}
                         order={genresOrder}

src/renderer/features/player/components/sleep-timer-button.tsx

@@ -273,7 +273,7 @@ export const SleepTimerButton = () => {
 
                     <Divider my="md" />
 
-                    <Grid gutter="xs">
+                    <Grid gap="xs">
                         {PRESET_OPTIONS.filter((option) => option.mode === 'timed').map(
                             (option, index) => (
                                 <Grid.Col key={index} span={4}>

src/renderer/features/playlists/components/add-to-playlist-context-modal.tsx

@@ -552,7 +552,7 @@ const PlaylistTableItem = memo(
 
         return (
             <Box className={styles.container} w="100%">
-                <Grid align="center" gutter="xs" w="100%">
+                <Grid align="center" gap="xs" w="100%">
                     <Grid.Col span="content">
                         <Flex align="center" justify="center" px="sm">
                             <ItemImage

src/renderer/features/sidebar/components/action-bar.tsx

@@ -18,12 +18,7 @@ export const ActionBar = () => {
 
     return (
         <div className={styles.container}>
-            <Grid
-                display="flex"
-                gutter="sm"
-                style={{ padding: '0 var(--theme-spacing-md)' }}
-                w="100%"
-            >
+            <Grid display="flex" gap="sm" style={{ padding: '0 var(--theme-spacing-md)' }} w="100%">
                 <Grid.Col span={7}>
                     <TextInput
                         leftSection={<Icon icon="search" />}

src/renderer/features/sidebar/components/sidebar-item.tsx

@@ -6,7 +6,7 @@ import styles from './sidebar-item.module.css';
 
 import { Button, ButtonProps } from '/@/shared/components/button/button';
 
-interface SidebarItemProps extends ButtonProps {
+interface SidebarItemProps extends Omit<ButtonProps, 'component' | 'ref'> {
     to: LinkProps['to'];
 }
 

src/shared/components/badge/badge.tsx

@@ -28,4 +28,4 @@ const BaseBadge = ({ children, classNames, variant = 'default', ...props }: Badg
     );
 };
 
-export const Badge = createPolymorphicComponent<'button', BadgeProps>(BaseBadge);
+export const Badge = createPolymorphicComponent<'div', BadgeProps>(BaseBadge);