wrap all instances of mantine hooks used in renderer

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

@@ -1,4 +1,3 @@
-import { useElementSize, useMergedRef } from '@mantine/hooks';
 import { throttle } from 'lodash';
 import { AnimatePresence, motion, Variants } from 'motion/react';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
@@ -20,6 +19,8 @@ import styles from './item-detail-list.module.css';
 import { ItemDetail } from '/@/renderer/components/item-detail/item-detail';
 import { ExpandedListItem } from '/@/renderer/components/item-list/expanded-list-item';
 import { useItemListState } from '/@/renderer/components/item-list/helpers/item-list-state';
+import { useElementSize } from '/@/shared/hooks/use-element-size';
+import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
 export interface ItemDetailListProps {
@@ -123,9 +124,9 @@ export const ItemDetailList = ({
         (_e: MouseEvent<HTMLDivElement>, item: unknown, itemType: LibraryItem) => {
             if (item && typeof item === 'object' && 'id' in item && 'serverId' in item) {
                 internalState.toggleExpanded({
+                    _serverId: item.serverId as string,
                     id: item.id as string,
                     itemType: itemType,
-                    _serverId: item.serverId as string,
                 });
             }
         },

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

@@ -1,4 +1,3 @@
-import { useElementSize, useMergedRef } from '@mantine/hooks';
 import clsx from 'clsx';
 import throttle from 'lodash/throttle';
 import { AnimatePresence } from 'motion/react';
@@ -42,6 +41,8 @@ import {
     useItemListState,
 } from '/@/renderer/components/item-list/helpers/item-list-state';
 import { ItemControls, ItemListHandle } from '/@/renderer/components/item-list/types';
+import { useElementSize } from '/@/shared/hooks/use-element-size';
+import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
 interface VirtualizedGridListProps {

src/renderer/components/item-list/item-table-list/item-table-list-column.tsx

@@ -9,7 +9,6 @@ import {
     dropTargetForElements,
 } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
-import { useMergedRef } from '@mantine/hooks';
 import clsx from 'clsx';
 import React, { CSSProperties, ReactElement, ReactNode, useEffect, useRef, useState } from 'react';
 import { CellComponentProps } from 'react-window-v2';
@@ -48,6 +47,7 @@ import { Icon } from '/@/shared/components/icon/icon';
 import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 import { Text } from '/@/shared/components/text/text';
 import { useDoubleClick } from '/@/shared/hooks/use-double-click';
+import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
 import { LibraryItem, QueueSong, Song } from '/@/shared/types/domain-types';
 import {
     dndUtils,

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

@@ -1,7 +1,6 @@
 // Component adapted from https://github.com/bvaughn/react-window/issues/826
 
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
-import { useMergedRef } from '@mantine/hooks';
 import clsx from 'clsx';
 import { AnimatePresence } from 'motion/react';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
@@ -39,6 +38,7 @@ import {
     ItemTableListColumnConfig,
 } from '/@/renderer/components/item-list/types';
 import { PlayerContext, usePlayer } from '/@/renderer/features/player/context/player-context';
+import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
 import { LibraryItem } from '/@/shared/types/domain-types';
 import { TableColumn } from '/@/shared/types/types';
 

src/renderer/components/native-scroll-area/native-scroll-area.tsx

@@ -1,4 +1,3 @@
-import { useMergedRef } from '@mantine/hooks';
 import { useInView } from 'motion/react';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
 import { CSSProperties, forwardRef, ReactNode, Ref, useEffect, useRef, useState } from 'react';
@@ -7,6 +6,7 @@ import styles from './native-scroll-area.module.css';
 
 import { PageHeader, PageHeaderProps } from '/@/renderer/components/page-header/page-header';
 import { useWindowSettings } from '/@/renderer/store/settings.store';
+import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
 import { Platform } from '/@/shared/types/types';
 
 interface NativeScrollAreaProps {