wrap useHotkeys to disable on command palette open (#1925)

src/renderer/components/item-list/helpers/use-list-hotkeys.ts

@@ -6,8 +6,8 @@ import {
     ItemListStateItemWithRequiredProperties,
 } from '/@/renderer/components/item-list/helpers/item-list-state';
 import { ItemControls } from '/@/renderer/components/item-list/types';
+import { useHotkeys } from '/@/renderer/hooks/use-hotkeys';
 import { useHotkeySettings, usePlayButtonBehavior } from '/@/renderer/store';
-import { useHotkeys } from '/@/shared/hooks/use-hotkeys';
 import { LibraryItem } from '/@/shared/types/domain-types';
 import { Play } from '/@/shared/types/types';
 

src/renderer/features/albums/components/album-detail-content.tsx

@@ -31,6 +31,7 @@ import {
 } from '/@/renderer/features/shared/components/list-sort-by-dropdown';
 import { ListSortOrderToggleButtonControlled } from '/@/renderer/features/shared/components/list-sort-order-toggle-button';
 import { FILTER_KEYS, searchLibraryItems } from '/@/renderer/features/shared/utils';
+import { useHotkeys } from '/@/renderer/hooks/use-hotkeys';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, usePlayerSong } from '/@/renderer/store';
 import { useExternalLinks, useSettingsStore } from '/@/renderer/store/settings.store';
@@ -49,7 +50,6 @@ 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 { useHotkeys } from '/@/shared/hooks/use-hotkeys';
 import {
     Album,
     AlbumListSort,

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

@@ -43,6 +43,7 @@ import { searchLibraryItems } from '/@/renderer/features/shared/utils';
 import { songsQueries } from '/@/renderer/features/songs/api/songs-api';
 import { useContainerQuery } from '/@/renderer/hooks';
 import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
+import { useHotkeys } from '/@/renderer/hooks/use-hotkeys';
 import { AppRoute } from '/@/renderer/router/routes';
 import {
     ArtistItem,
@@ -75,7 +76,6 @@ import { TextInput } from '/@/shared/components/text-input/text-input';
 import { TextTitle } from '/@/shared/components/text-title/text-title';
 import { Text } from '/@/shared/components/text/text';
 import { useDebouncedValue } from '/@/shared/hooks/use-debounced-value';
-import { useHotkeys } from '/@/shared/hooks/use-hotkeys';
 import { useLocalStorage } from '/@/shared/hooks/use-local-storage';
 import {
     Album,

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

@@ -15,6 +15,7 @@ import { eventEmitter } from '/@/renderer/events/event-emitter';
 import { useIsPlayerFetching, usePlayer } from '/@/renderer/features/player/context/player-context';
 import { searchLibraryItems } from '/@/renderer/features/shared/utils';
 import { useDragDrop } from '/@/renderer/hooks/use-drag-drop';
+import { useHotkeys } from '/@/renderer/hooks/use-hotkeys';
 import {
     isShuffleEnabled,
     mapShuffledToQueueIndex,
@@ -30,7 +31,6 @@ import { Flex } from '/@/shared/components/flex/flex';
 import { LoadingOverlay } from '/@/shared/components/loading-overlay/loading-overlay';
 import { useDebouncedValue } from '/@/shared/hooks/use-debounced-value';
 import { useFocusWithin } from '/@/shared/hooks/use-focus-within';
-import { useHotkeys } from '/@/shared/hooks/use-hotkeys';
 import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
 import { Folder, LibraryItem, QueueSong, Song } from '/@/shared/types/domain-types';
 import { DragTarget } from '/@/shared/types/drag-and-drop';

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

@@ -26,6 +26,7 @@ import {
     SONG_DISPLAY_TYPES,
 } from '/@/renderer/features/shared/components/list-config-menu';
 import { useFastAverageColor } from '/@/renderer/hooks';
+import { useHotkeys } from '/@/renderer/hooks/use-hotkeys';
 import {
     useFullScreenPlayerStore,
     useFullScreenPlayerStoreActions,
@@ -46,7 +47,6 @@ import { Popover } from '/@/shared/components/popover/popover';
 import { SegmentedControl } from '/@/shared/components/segmented-control/segmented-control';
 import { Slider } from '/@/shared/components/slider/slider';
 import { Switch } from '/@/shared/components/switch/switch';
-import { useHotkeys } from '/@/shared/hooks/use-hotkeys';
 import { LibraryItem } from '/@/shared/types/domain-types';
 import { ItemListKey, ListDisplayType, Platform } from '/@/shared/types/types';
 

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

@@ -5,6 +5,7 @@ import { useLocation } from 'react-router';
 import styles from './full-screen-visualizer.module.css';
 
 import { FullScreenVisualizerSongInfo } from '/@/renderer/features/player/components/full-screen-visualizer-song-info';
+import { useHotkeys } from '/@/renderer/hooks/use-hotkeys';
 import { useIsMobile } from '/@/renderer/hooks/use-is-mobile';
 import { useFullScreenPlayerStoreActions } from '/@/renderer/store/full-screen-player.store';
 import {
@@ -12,7 +13,6 @@ import {
     useSettingsStore,
     useWindowSettings,
 } from '/@/renderer/store/settings.store';
-import { useHotkeys } from '/@/shared/hooks/use-hotkeys';
 import { Platform } from '/@/shared/types/types';
 
 const AudioMotionAnalyzerVisualizer = lazy(() =>

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

@@ -18,6 +18,7 @@ import {
     useIsRadioActive,
     useRadioPlayer,
 } from '/@/renderer/features/radio/hooks/use-radio-player';
+import { useHotkeys } from '/@/renderer/hooks/use-hotkeys';
 import { AppRoute } from '/@/renderer/router/routes';
 import {
     useAppStore,
@@ -34,7 +35,6 @@ import { Icon } from '/@/shared/components/icon/icon';
 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

@@ -10,6 +10,7 @@ import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { useSetRating } from '/@/renderer/features/shared/hooks/use-set-rating';
 import { useCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
 import { useDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
+import { useHotkeys } from '/@/renderer/hooks/use-hotkeys';
 import {
     useAppStoreActions,
     useAutoDJSettings,
@@ -34,7 +35,6 @@ import { Button } from '/@/shared/components/button/button';
 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 { useThrottledCallback } from '/@/shared/hooks/use-throttled-callback';
 import { useThrottledValue } from '/@/shared/hooks/use-throttled-value';

src/renderer/features/player/hooks/use-playback-hotkeys.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
+import { HotkeyItem, useHotkeys } from '/@/renderer/hooks/use-hotkeys';
 import { useHotkeySettings, usePlayerStore } from '/@/renderer/store';
-import { HotkeyItem, useHotkeys } from '/@/shared/hooks/use-hotkeys';
 
 export const usePlaybackHotkeys = () => {
     const { bindings } = useHotkeySettings();

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

@@ -9,12 +9,12 @@ import {
 } from 'react';
 import { shallow } from 'zustand/shallow';
 
+import { useHotkeys } from '/@/renderer/hooks/use-hotkeys';
 import { useSettingsStore } from '/@/renderer/store';
 import { ActionIcon, ActionIconProps } from '/@/shared/components/action-icon/action-icon';
 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/hooks/index.ts

@@ -3,5 +3,6 @@ export * from './use-check-for-updates';
 export * from './use-container-query';
 export * from './use-fast-average-color';
 export * from './use-hide-scrollbar';
+export * from './use-hotkeys';
 export * from './use-is-mounted';
 export * from './use-should-pad-titlebar';

src/renderer/hooks/use-hotkeys.ts

@@ -0,0 +1,23 @@
+import {
+    type HotkeyItem as MantineHotkeyItem,
+    useHotkeys as useMantineHotkeys,
+} from '@mantine/hooks';
+
+import { useAppStore } from '/@/renderer/store';
+
+const EMPTY_HOTKEYS: MantineHotkeyItem[] = [];
+
+export const useHotkeys = (
+    hotkeys: MantineHotkeyItem[],
+    tagsToIgnore?: string[],
+    triggerOnContentEditable?: boolean,
+) => {
+    const commandPaletteOpened = useAppStore((state) => state.commandPalette.opened);
+    useMantineHotkeys(
+        commandPaletteOpened ? EMPTY_HOTKEYS : hotkeys,
+        tagsToIgnore,
+        triggerOnContentEditable,
+    );
+};
+
+export type HotkeyItem = MantineHotkeyItem;

src/renderer/layouts/responsive-layout.tsx

@@ -5,6 +5,7 @@ import { useNavigate } from 'react-router';
 import { useAppTracker } from '/@/renderer/features/analytics/hooks/use-app-tracker';
 import { CommandPalette } from '/@/renderer/features/search/components/command-palette';
 import { useGarbageCollection } from '/@/renderer/hooks/use-garbage-collection';
+import { HotkeyItem, useHotkeys } from '/@/renderer/hooks/use-hotkeys';
 import { useIsMobile } from '/@/renderer/hooks/use-is-mobile';
 import { DefaultLayout } from '/@/renderer/layouts/default-layout';
 import { MobileLayout } from '/@/renderer/layouts/mobile-layout/mobile-layout';
@@ -15,7 +16,6 @@ import {
     useSettingsStoreActions,
     useZoomFactor,
 } from '/@/renderer/store';
-import { HotkeyItem, useHotkeys } from '/@/shared/hooks/use-hotkeys';
 
 interface ResponsiveLayoutProps {
     shell?: boolean;