mirror of
https://github.com/antebudimir/feishin.git
synced 2025-12-31 18:13:31 +00:00
support tab navigation on ActionIcons in command palette
This commit is contained in:
DerPenz
parent
d28054cc7f
commit
33af5e625b
3 changed files with 127 additions and 45 deletions
|
|
@ -0,0 +1,37 @@
|
|||
import { Command } from 'cmdk';
|
||||
import { ComponentPropsWithoutRef, ReactNode, useEffect, useRef, useState } from 'react';
|
||||
|
||||
interface CommandItemSelectableProps
|
||||
extends Omit<ComponentPropsWithoutRef<typeof Command.Item>, 'children'> {
|
||||
children: (args: { isHighlighted: boolean }) => ReactNode;
|
||||
}
|
||||
|
||||
export function CommandItemSelectable({ children, ...itemProps }: CommandItemSelectableProps) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [isHighlighted, setIsHighlighted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
|
||||
setIsHighlighted(el.getAttribute('aria-selected') === 'true');
|
||||
|
||||
const observer = new MutationObserver(() => {
|
||||
const selected = el.getAttribute('aria-selected') === 'true';
|
||||
setIsHighlighted(selected);
|
||||
});
|
||||
|
||||
observer.observe(el, {
|
||||
attributeFilter: ['aria-selected'],
|
||||
attributes: true,
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Command.Item {...itemProps} ref={ref}>
|
||||
{children({ isHighlighted })}
|
||||
</Command.Item>
|
||||
);
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@ import { generatePath, useNavigate } from 'react-router';
|
|||
|
||||
import { usePlayQueueAdd } from '/@/renderer/features/player';
|
||||
import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command';
|
||||
import { CommandItemSelectable } from '/@/renderer/features/search/components/command-item-selectable';
|
||||
import { GoToCommands } from '/@/renderer/features/search/components/go-to-commands';
|
||||
import { HomeCommands } from '/@/renderer/features/search/components/home-commands';
|
||||
import { LibraryCommandItem } from '/@/renderer/features/search/components/library-command-item';
|
||||
|
|
@ -112,6 +113,13 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
|
|||
return 0;
|
||||
}}
|
||||
label="Global Command Menu"
|
||||
onKeyDown={(e) => {
|
||||
// Focus the search input when navigating with arrow keys
|
||||
// to prevent the focus from staying on the command-item ActionIcon
|
||||
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
||||
searchInputRef.current?.focus();
|
||||
}
|
||||
}}
|
||||
onValueChange={setValue}
|
||||
value={value}
|
||||
>
|
||||
|
|
@ -142,7 +150,7 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
|
|||
{showAlbumGroup && (
|
||||
<Command.Group heading="Albums">
|
||||
{data?.albums?.map((album) => (
|
||||
<Command.Item
|
||||
<CommandItemSelectable
|
||||
key={`search-album-${album.id}`}
|
||||
onSelect={() => {
|
||||
navigate(
|
||||
|
|
@ -155,24 +163,27 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
|
|||
}}
|
||||
value={`search-${album.id}`}
|
||||
>
|
||||
<LibraryCommandItem
|
||||
handlePlayQueueAdd={handlePlayQueueAdd}
|
||||
id={album.id}
|
||||
imageUrl={album.imageUrl}
|
||||
itemType={LibraryItem.ALBUM}
|
||||
subtitle={album.albumArtists
|
||||
.map((artist) => artist.name)
|
||||
.join(', ')}
|
||||
title={album.name}
|
||||
/>
|
||||
</Command.Item>
|
||||
{({ isHighlighted }) => (
|
||||
<LibraryCommandItem
|
||||
handlePlayQueueAdd={handlePlayQueueAdd}
|
||||
id={album.id}
|
||||
imageUrl={album.imageUrl}
|
||||
isHighlighted={isHighlighted}
|
||||
itemType={LibraryItem.ALBUM}
|
||||
subtitle={album.albumArtists
|
||||
.map((artist) => artist.name)
|
||||
.join(', ')}
|
||||
title={album.name}
|
||||
/>
|
||||
)}
|
||||
</CommandItemSelectable>
|
||||
))}
|
||||
</Command.Group>
|
||||
)}
|
||||
{showArtistGroup && (
|
||||
<Command.Group heading="Artists">
|
||||
{data?.albumArtists.map((artist) => (
|
||||
<Command.Item
|
||||
<CommandItemSelectable
|
||||
key={`artist-${artist.id}`}
|
||||
onSelect={() => {
|
||||
navigate(
|
||||
|
|
@ -185,30 +196,33 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
|
|||
}}
|
||||
value={`search-${artist.id}`}
|
||||
>
|
||||
<LibraryCommandItem
|
||||
disabled={artist?.albumCount === 0}
|
||||
handlePlayQueueAdd={handlePlayQueueAdd}
|
||||
id={artist.id}
|
||||
imageUrl={artist.imageUrl}
|
||||
itemType={LibraryItem.ALBUM_ARTIST}
|
||||
subtitle={
|
||||
artist?.albumCount !== undefined &&
|
||||
artist?.albumCount !== null
|
||||
? t('entity.albumWithCount', {
|
||||
count: artist.albumCount,
|
||||
})
|
||||
: undefined
|
||||
}
|
||||
title={artist.name}
|
||||
/>
|
||||
</Command.Item>
|
||||
{({ isHighlighted }) => (
|
||||
<LibraryCommandItem
|
||||
disabled={artist?.albumCount === 0}
|
||||
handlePlayQueueAdd={handlePlayQueueAdd}
|
||||
id={artist.id}
|
||||
imageUrl={artist.imageUrl}
|
||||
isHighlighted={isHighlighted}
|
||||
itemType={LibraryItem.ALBUM_ARTIST}
|
||||
subtitle={
|
||||
artist?.albumCount !== undefined &&
|
||||
artist?.albumCount !== null
|
||||
? t('entity.albumWithCount', {
|
||||
count: artist.albumCount,
|
||||
})
|
||||
: undefined
|
||||
}
|
||||
title={artist.name}
|
||||
/>
|
||||
)}
|
||||
</CommandItemSelectable>
|
||||
))}
|
||||
</Command.Group>
|
||||
)}
|
||||
{showTrackGroup && (
|
||||
<Command.Group heading="Tracks">
|
||||
{data?.songs.map((song) => (
|
||||
<Command.Item
|
||||
<CommandItemSelectable
|
||||
key={`artist-${song.id}`}
|
||||
onSelect={() => {
|
||||
navigate(
|
||||
|
|
@ -221,17 +235,20 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
|
|||
}}
|
||||
value={`search-${song.id}`}
|
||||
>
|
||||
<LibraryCommandItem
|
||||
handlePlayQueueAdd={handlePlayQueueAdd}
|
||||
id={song.id}
|
||||
imageUrl={song.imageUrl}
|
||||
itemType={LibraryItem.SONG}
|
||||
subtitle={song.artists
|
||||
.map((artist) => artist.name)
|
||||
.join(', ')}
|
||||
title={song.name}
|
||||
/>
|
||||
</Command.Item>
|
||||
{({ isHighlighted }) => (
|
||||
<LibraryCommandItem
|
||||
handlePlayQueueAdd={handlePlayQueueAdd}
|
||||
id={song.id}
|
||||
imageUrl={song.imageUrl}
|
||||
isHighlighted={isHighlighted}
|
||||
itemType={LibraryItem.SONG}
|
||||
subtitle={song.artists
|
||||
.map((artist) => artist.name)
|
||||
.join(', ')}
|
||||
title={song.name}
|
||||
/>
|
||||
)}
|
||||
</CommandItemSelectable>
|
||||
))}
|
||||
</Command.Group>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { CSSProperties, MouseEvent, useCallback, useState } from 'react';
|
||||
import { CSSProperties, SyntheticEvent, useCallback, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import styles from './library-command-item.module.css';
|
||||
|
|
@ -16,6 +16,7 @@ interface LibraryCommandItemProps {
|
|||
handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
|
||||
id: string;
|
||||
imageUrl: null | string;
|
||||
isHighlighted?: boolean;
|
||||
itemType: LibraryItem;
|
||||
subtitle?: string;
|
||||
title?: string;
|
||||
|
|
@ -26,6 +27,7 @@ export const LibraryCommandItem = ({
|
|||
handlePlayQueueAdd,
|
||||
id,
|
||||
imageUrl,
|
||||
isHighlighted,
|
||||
itemType,
|
||||
subtitle,
|
||||
title,
|
||||
|
|
@ -33,7 +35,7 @@ export const LibraryCommandItem = ({
|
|||
const { t } = useTranslation();
|
||||
|
||||
const handlePlay = useCallback(
|
||||
(e: MouseEvent, id: string, playType: Play) => {
|
||||
(e: SyntheticEvent, id: string, playType: Play) => {
|
||||
e.stopPropagation();
|
||||
handlePlayQueueAdd?.({
|
||||
byItemType: {
|
||||
|
|
@ -48,6 +50,8 @@ export const LibraryCommandItem = ({
|
|||
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
const showControls = isHighlighted || isHovered;
|
||||
|
||||
return (
|
||||
<Flex
|
||||
gap="xl"
|
||||
|
|
@ -73,13 +77,19 @@ export const LibraryCommandItem = ({
|
|||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
{isHovered && (
|
||||
{showControls && (
|
||||
<Group align="center" gap="sm" justify="flex-end" wrap="nowrap">
|
||||
<ActionIcon
|
||||
disabled={disabled}
|
||||
icon="mediaPlay"
|
||||
onClick={(e) => handlePlay(e, id, Play.NOW)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handlePlay(e, id, Play.NOW);
|
||||
}
|
||||
}}
|
||||
size="xs"
|
||||
tabIndex={disabled ? -1 : 0}
|
||||
tooltip={{
|
||||
label: t('player.play', { postProcess: 'sentenceCase' }),
|
||||
openDelay: 500,
|
||||
|
|
@ -91,7 +101,13 @@ export const LibraryCommandItem = ({
|
|||
disabled={disabled}
|
||||
icon="mediaShuffle"
|
||||
onClick={(e) => handlePlay(e, id, Play.SHUFFLE)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handlePlay(e, id, Play.SHUFFLE);
|
||||
}
|
||||
}}
|
||||
size="xs"
|
||||
tabIndex={disabled ? -1 : 0}
|
||||
tooltip={{
|
||||
label: t('player.shuffle', { postProcess: 'sentenceCase' }),
|
||||
openDelay: 500,
|
||||
|
|
@ -103,7 +119,13 @@ export const LibraryCommandItem = ({
|
|||
disabled={disabled}
|
||||
icon="mediaPlayLast"
|
||||
onClick={(e) => handlePlay(e, id, Play.LAST)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handlePlay(e, id, Play.LAST);
|
||||
}
|
||||
}}
|
||||
size="xs"
|
||||
tabIndex={disabled ? -1 : 0}
|
||||
tooltip={{
|
||||
label: t('player.addLast', { postProcess: 'sentenceCase' }),
|
||||
|
||||
|
|
@ -115,7 +137,13 @@ export const LibraryCommandItem = ({
|
|||
disabled={disabled}
|
||||
icon="mediaPlayNext"
|
||||
onClick={(e) => handlePlay(e, id, Play.NEXT)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handlePlay(e, id, Play.NEXT);
|
||||
}
|
||||
}}
|
||||
size="xs"
|
||||
tabIndex={disabled ? -1 : 0}
|
||||
tooltip={{
|
||||
label: t('player.addNext', { postProcess: 'sentenceCase' }),
|
||||
openDelay: 500,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue