wrap all instances of mantine hooks used in renderer

src/renderer/features/albums/components/expanded-album-list-item.tsx

@@ -1,4 +1,3 @@
-import { useMergedRef } from '@mantine/hooks';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import clsx from 'clsx';
 import formatDuration from 'format-duration';
@@ -25,6 +24,7 @@ import { Separator } from '/@/shared/components/separator/separator';
 import { Spinner } from '/@/shared/components/spinner/spinner';
 import { TextTitle } from '/@/shared/components/text-title/text-title';
 import { Text } from '/@/shared/components/text/text';
+import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
 import { LibraryItem, Song } from '/@/shared/types/domain-types';
 import { DragOperation, DragTarget, DragTargetMap } from '/@/shared/types/drag-and-drop';
 

src/renderer/features/lyrics/components/lyrics-search-form.tsx

@@ -1,5 +1,4 @@
 import { useForm } from '@mantine/form';
-import { useDebouncedValue } from '@mantine/hooks';
 import { openModal } from '@mantine/modals';
 import { useQuery } from '@tanstack/react-query';
 import orderBy from 'lodash/orderBy';
@@ -17,6 +16,7 @@ import { Spinner } from '/@/shared/components/spinner/spinner';
 import { Stack } from '/@/shared/components/stack/stack';
 import { TextInput } from '/@/shared/components/text-input/text-input';
 import { Text } from '/@/shared/components/text/text';
+import { useDebouncedValue } from '/@/shared/hooks/use-debounced-value';
 import {
     InternetProviderLyricSearchResponse,
     LyricSource,

src/renderer/features/now-playing/components/play-queue.tsx

@@ -1,4 +1,3 @@
-import { useDebouncedValue, useMergedRef } from '@mantine/hooks';
 import clsx from 'clsx';
 import { forwardRef, ReactElement, useEffect, useMemo, useRef, useState } from 'react';
 
@@ -25,6 +24,8 @@ import { searchSongs } from '/@/renderer/utils/search-songs';
 import { Flex } from '/@/shared/components/flex/flex';
 import { LoadingOverlay } from '/@/shared/components/loading-overlay/loading-overlay';
 import { Text } from '/@/shared/components/text/text';
+import { useDebouncedValue } from '/@/shared/hooks/use-debounced-value';
+import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
 import { LibraryItem, QueueSong, Song } from '/@/shared/types/domain-types';
 import { DragTarget } from '/@/shared/types/drag-and-drop';
 import { ItemListKey, Play, PlayerQueueType } from '/@/shared/types/types';

src/renderer/features/player/components/full-screen-player-image.tsx

@@ -1,4 +1,3 @@
-import { useSetState } from '@mantine/hooks';
 import clsx from 'clsx';
 import { AnimatePresence, HTMLMotionProps, motion, Variants } from 'motion/react';
 import { Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
@@ -18,6 +17,7 @@ import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Text } from '/@/shared/components/text/text';
+import { useSetState } from '/@/shared/hooks/use-set-state';
 import { PlayerData, QueueSong } from '/@/shared/types/domain-types';
 
 const imageVariants: Variants = {

src/renderer/features/player/components/full-screen-player.tsx

@@ -1,4 +1,3 @@
-import { useHotkeys } from '@mantine/hooks';
 import { motion, Variants } from 'motion/react';
 import { CSSProperties, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -27,6 +26,7 @@ import { Popover } from '/@/shared/components/popover/popover';
 import { Select } from '/@/shared/components/select/select';
 import { Slider } from '/@/shared/components/slider/slider';
 import { Switch } from '/@/shared/components/switch/switch';
+import { useHotkeys } from '/@/shared/hooks/use-hotkeys';
 import { Platform } from '/@/shared/types/types';
 
 const mainBackground = 'var(--theme-colors-background)';

src/renderer/features/player/components/left-controls.tsx

@@ -1,4 +1,3 @@
-import { useHotkeys } from '@mantine/hooks';
 import clsx from 'clsx';
 import { AnimatePresence, LayoutGroup, motion } from 'motion/react';
 import React, { MouseEvent } from 'react';
@@ -24,6 +23,7 @@ import { Separator } from '/@/shared/components/separator/separator';
 import { Text } from '/@/shared/components/text/text';
 import { Tooltip } from '/@/shared/components/tooltip/tooltip';
 import { PlaybackSelectors } from '/@/shared/constants/playback-selectors';
+import { useHotkeys } from '/@/shared/hooks/use-hotkeys';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
 export const LeftControls = () => {

src/renderer/features/player/components/right-controls.tsx

@@ -1,4 +1,3 @@
-import { useHotkeys, useMediaQuery } from '@mantine/hooks';
 import { useCallback, WheelEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -23,6 +22,8 @@ import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Flex } from '/@/shared/components/flex/flex';
 import { Group } from '/@/shared/components/group/group';
 import { Rating } from '/@/shared/components/rating/rating';
+import { useHotkeys } from '/@/shared/hooks/use-hotkeys';
+import { useMediaQuery } from '/@/shared/hooks/use-media-query';
 import { LibraryItem, QueueSong, ServerType } from '/@/shared/types/domain-types';
 
 const calculateVolumeUp = (volume: number, volumeWheelStep: number) => {

src/renderer/features/search/components/command-palette.tsx

@@ -1,4 +1,3 @@
-import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useQuery } from '@tanstack/react-query';
 import { Fragment, useCallback, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -23,6 +22,8 @@ import { Kbd } from '/@/shared/components/kbd/kbd';
 import { Modal } from '/@/shared/components/modal/modal';
 import { Spinner } from '/@/shared/components/spinner/spinner';
 import { TextInput } from '/@/shared/components/text-input/text-input';
+import { useDebouncedValue } from '/@/shared/hooks/use-debounced-value';
+import { useDisclosure } from '/@/shared/hooks/use-disclosure';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
 interface CommandPaletteProps {

src/renderer/features/servers/components/add-server-form.tsx

@@ -1,5 +1,4 @@
 import { useForm } from '@mantine/form';
-import { useFocusTrap } from '@mantine/hooks';
 import { closeAllModals } from '@mantine/modals';
 import isElectron from 'is-electron';
 import { nanoid } from 'nanoid/non-secure';
@@ -21,6 +20,7 @@ import { Stack } from '/@/shared/components/stack/stack';
 import { TextInput } from '/@/shared/components/text-input/text-input';
 import { Text } from '/@/shared/components/text/text';
 import { toast } from '/@/shared/components/toast/toast';
+import { useFocusTrap } from '/@/shared/hooks/use-focus-trap';
 import { AuthenticationResponse, ServerListItemWithCredential } from '/@/shared/types/domain-types';
 import { DiscoveredServerItem, ServerType, toServerType } from '/@/shared/types/types';
 

src/renderer/features/servers/components/edit-server-form.tsx

@@ -1,5 +1,4 @@
 import { useForm } from '@mantine/form';
-import { useFocusTrap } from '@mantine/hooks';
 import { closeAllModals } from '@mantine/modals';
 import isElectron from 'is-electron';
 import { useState } from 'react';
@@ -18,6 +17,7 @@ import { Stack } from '/@/shared/components/stack/stack';
 import { TextInput } from '/@/shared/components/text-input/text-input';
 import { toast } from '/@/shared/components/toast/toast';
 import { Tooltip } from '/@/shared/components/tooltip/tooltip';
+import { useFocusTrap } from '/@/shared/hooks/use-focus-trap';
 import {
     AuthenticationResponse,
     ServerListItem,

src/renderer/features/servers/components/server-list-item.tsx

@@ -1,4 +1,3 @@
-import { useDisclosure } from '@mantine/hooks';
 import isElectron from 'is-electron';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,6 +11,7 @@ import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Table } from '/@/shared/components/table/table';
+import { useDisclosure } from '/@/shared/hooks/use-disclosure';
 import { ServerListItem as ServerItem } from '/@/shared/types/domain-types';
 
 const localSettings = isElectron() ? window.api.localSettings : null;

src/renderer/features/shared/components/grid-config.tsx

@@ -9,9 +9,8 @@ import {
     dropTargetForElements,
 } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
-import { useDebouncedState } from '@mantine/hooks';
 import clsx from 'clsx';
-import Fuse from 'fuse.js';
+import Fuse, { FuseResultMatch } from 'fuse.js';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -35,6 +34,7 @@ import { Slider } from '/@/shared/components/slider/slider';
 import { Stack } from '/@/shared/components/stack/stack';
 import { TextInput } from '/@/shared/components/text-input/text-input';
 import { Text } from '/@/shared/components/text/text';
+import { useDebouncedState } from '/@/shared/hooks/use-debounced-state';
 import { dndUtils, DragData, DragOperation, DragTarget } from '/@/shared/types/drag-and-drop';
 import { ItemListKey, ListPaginationType } from '/@/shared/types/types';
 
@@ -239,7 +239,7 @@ export const GridConfig = ({
                 };
             })
             .filter(
-                (option): option is typeof allOptions[0] & { disabled?: boolean } =>
+                (option): option is (typeof allOptions)[0] & { disabled: boolean } =>
                     option !== null,
             );
     }, [list, t, grid, extraOptions, optionsConfig, setList, listKey]);
@@ -433,7 +433,11 @@ const GridRowConfig = ({
     );
 };
 
-const DragHandle = ({ dragHandleRef }: { dragHandleRef: React.RefObject<HTMLButtonElement> }) => {
+const DragHandle = ({
+    dragHandleRef,
+}: {
+    dragHandleRef: React.RefObject<HTMLButtonElement | null>;
+}) => {
     return (
         <ActionIcon
             icon="dragVertical"
@@ -470,11 +474,11 @@ const GridRowItem = memo(
         handleReorder: (idFrom: string, idTo: string, edge: Edge | null) => void;
         item: ItemGridListRowConfig;
         label: string;
-        matches: null | readonly Fuse.FuseResultMatch[];
+        matches: null | readonly FuseResultMatch[];
     }) => {
         const { t } = useTranslation();
         const ref = useRef<HTMLDivElement>(null);
-        const dragHandleRef = useRef<HTMLButtonElement>(null);
+        const dragHandleRef = useRef<HTMLButtonElement | null>(null);
         const [isDragging, setIsDragging] = useState(false);
         const [isDraggedOver, setIsDraggedOver] = useState<Edge | null>(null);
 

src/renderer/features/shared/components/search-input.tsx

@@ -1,4 +1,3 @@
-import { useHotkeys } from '@mantine/hooks';
 import { ChangeEvent, CSSProperties, KeyboardEvent, useRef, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 
@@ -7,6 +6,7 @@ import { ActionIcon, ActionIconProps } from '/@/shared/components/action-icon/ac
 import { Box } from '/@/shared/components/box/box';
 import { Icon } from '/@/shared/components/icon/icon';
 import { TextInput, TextInputProps } from '/@/shared/components/text-input/text-input';
+import { useHotkeys } from '/@/shared/hooks/use-hotkeys';
 
 interface SearchInputProps extends TextInputProps {
     buttonProps?: Partial<ActionIconProps>;

src/renderer/features/shared/components/table-config.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 { useDebouncedState } from '@mantine/hooks';
 import clsx from 'clsx';
 import Fuse, { type FuseResultMatch } from 'fuse.js';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -35,6 +34,7 @@ import { Stack } from '/@/shared/components/stack/stack';
 import { TextInput } from '/@/shared/components/text-input/text-input';
 import { Text } from '/@/shared/components/text/text';
 import { Tooltip } from '/@/shared/components/tooltip/tooltip';
+import { useDebouncedState } from '/@/shared/hooks/use-debounced-state';
 import { dndUtils, DragData, DragOperation, DragTarget } from '/@/shared/types/drag-and-drop';
 import { ItemListKey, ListPaginationType } from '/@/shared/types/types';
 

src/renderer/features/shared/hooks/use-search-term-filter.ts

@@ -1,7 +1,7 @@
-import { useDebouncedCallback } from '@mantine/hooks';
 import { parseAsString, useQueryState } from 'nuqs';
 
 import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
+import { useDebouncedCallback } from '/@/shared/hooks/use-debounced-callback';
 
 export const useSearchTermFilter = (defaultValue?: string) => {
     const [searchTerm, setSearchTerm] = useQueryState(