From f5eb3f14883edcd96944fac3663b439e8cb9887d Mon Sep 17 00:00:00 2001 From: jeffvli Date: Tue, 28 Apr 2026 19:31:41 -0700 Subject: [PATCH] wrap useHotkeys to disable on command palette open (#1925) --- .../item-list/helpers/use-list-hotkeys.ts | 2 +- .../components/album-detail-content.tsx | 2 +- .../album-artist-detail-content.tsx | 2 +- .../now-playing/components/play-queue.tsx | 2 +- .../player/components/full-screen-player.tsx | 2 +- .../components/full-screen-visualizer.tsx | 2 +- .../player/components/left-controls.tsx | 2 +- .../player/components/right-controls.tsx | 2 +- .../player/hooks/use-playback-hotkeys.ts | 2 +- .../shared/components/search-input.tsx | 2 +- src/renderer/hooks/index.ts | 1 + src/renderer/hooks/use-hotkeys.ts | 23 +++++++++++++++++++ src/renderer/layouts/responsive-layout.tsx | 2 +- 13 files changed, 35 insertions(+), 11 deletions(-) create mode 100644 src/renderer/hooks/use-hotkeys.ts diff --git a/src/renderer/components/item-list/helpers/use-list-hotkeys.ts b/src/renderer/components/item-list/helpers/use-list-hotkeys.ts index bc285474f..a2b479d44 100644 --- a/src/renderer/components/item-list/helpers/use-list-hotkeys.ts +++ b/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'; diff --git a/src/renderer/features/albums/components/album-detail-content.tsx b/src/renderer/features/albums/components/album-detail-content.tsx index a1e9a6b5f..198036e57 100644 --- a/src/renderer/features/albums/components/album-detail-content.tsx +++ b/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, diff --git a/src/renderer/features/artists/components/album-artist-detail-content.tsx b/src/renderer/features/artists/components/album-artist-detail-content.tsx index 1980e39d6..441adf74e 100644 --- a/src/renderer/features/artists/components/album-artist-detail-content.tsx +++ b/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, diff --git a/src/renderer/features/now-playing/components/play-queue.tsx b/src/renderer/features/now-playing/components/play-queue.tsx index 192545cae..11cf3d090 100644 --- a/src/renderer/features/now-playing/components/play-queue.tsx +++ b/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'; diff --git a/src/renderer/features/player/components/full-screen-player.tsx b/src/renderer/features/player/components/full-screen-player.tsx index 323836355..df292be46 100644 --- a/src/renderer/features/player/components/full-screen-player.tsx +++ b/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'; diff --git a/src/renderer/features/player/components/full-screen-visualizer.tsx b/src/renderer/features/player/components/full-screen-visualizer.tsx index 9a0da655d..7e8520c73 100644 --- a/src/renderer/features/player/components/full-screen-visualizer.tsx +++ b/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(() => diff --git a/src/renderer/features/player/components/left-controls.tsx b/src/renderer/features/player/components/left-controls.tsx index fe28c4652..f510ab133 100644 --- a/src/renderer/features/player/components/left-controls.tsx +++ b/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 = () => { diff --git a/src/renderer/features/player/components/right-controls.tsx b/src/renderer/features/player/components/right-controls.tsx index 7312479d8..57cc6c76c 100644 --- a/src/renderer/features/player/components/right-controls.tsx +++ b/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'; diff --git a/src/renderer/features/player/hooks/use-playback-hotkeys.ts b/src/renderer/features/player/hooks/use-playback-hotkeys.ts index bf9932b2e..aeaad61f1 100644 --- a/src/renderer/features/player/hooks/use-playback-hotkeys.ts +++ b/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(); diff --git a/src/renderer/features/shared/components/search-input.tsx b/src/renderer/features/shared/components/search-input.tsx index dedb26b08..ff5b5d57f 100644 --- a/src/renderer/features/shared/components/search-input.tsx +++ b/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; diff --git a/src/renderer/hooks/index.ts b/src/renderer/hooks/index.ts index dd25d8950..e083aa1b1 100644 --- a/src/renderer/hooks/index.ts +++ b/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'; diff --git a/src/renderer/hooks/use-hotkeys.ts b/src/renderer/hooks/use-hotkeys.ts new file mode 100644 index 000000000..42bc13274 --- /dev/null +++ b/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; diff --git a/src/renderer/layouts/responsive-layout.tsx b/src/renderer/layouts/responsive-layout.tsx index d51aec746..3c2220cef 100644 --- a/src/renderer/layouts/responsive-layout.tsx +++ b/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;