antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2025-12-31 18:13:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #1024 from Der-Penz/development

Browse source 
Support tab navigation on ActionIcons in command palette
This commit is contained in:
Jeff 2025-07-29 21:22:47 -05:00 • committed by GitHub
commit e78ec7688a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 127 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/renderer/features/search/components/command-item-selectable.tsx Normal file
View file

@ -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>
);
}

101
src/renderer/features/search/components/command-palette.tsx
View file

@ -5,6 +5,7 @@ import { generatePath, useNavigate } from 'react-router';
import { usePlayQueueAdd } from '/@/renderer/features/player'; import { usePlayQueueAdd } from '/@/renderer/features/player';
import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command'; 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 { GoToCommands } from '/@/renderer/features/search/components/go-to-commands';
import { HomeCommands } from '/@/renderer/features/search/components/home-commands'; import { HomeCommands } from '/@/renderer/features/search/components/home-commands';
import { LibraryCommandItem } from '/@/renderer/features/search/components/library-command-item'; import { LibraryCommandItem } from '/@/renderer/features/search/components/library-command-item';
@ -112,6 +113,13 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
return 0; return 0;
}} }}
label="Global Command Menu" 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} onValueChange={setValue}
value={value} value={value}
> >
@ -142,7 +150,7 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
{showAlbumGroup && ( {showAlbumGroup && (
<Command.Group heading="Albums"> <Command.Group heading="Albums">
{data?.albums?.map((album) => ( {data?.albums?.map((album) => (
<Command.Item <CommandItemSelectable
key={`search-album-${album.id}`} key={`search-album-${album.id}`}
onSelect={() => { onSelect={() => {
navigate( navigate(
@ -155,24 +163,27 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
}} }}
value={`search-${album.id}`} value={`search-${album.id}`}
> >
<LibraryCommandItem {({ isHighlighted }) => (
handlePlayQueueAdd={handlePlayQueueAdd} <LibraryCommandItem
id={album.id} handlePlayQueueAdd={handlePlayQueueAdd}
imageUrl={album.imageUrl} id={album.id}
itemType={LibraryItem.ALBUM} imageUrl={album.imageUrl}
subtitle={album.albumArtists isHighlighted={isHighlighted}
.map((artist) => artist.name) itemType={LibraryItem.ALBUM}
.join(', ')} subtitle={album.albumArtists
title={album.name} .map((artist) => artist.name)
/> .join(', ')}
</Command.Item> title={album.name}
/>
)}
</CommandItemSelectable>
))} ))}
</Command.Group> </Command.Group>
)} )}
{showArtistGroup && ( {showArtistGroup && (
<Command.Group heading="Artists"> <Command.Group heading="Artists">
{data?.albumArtists.map((artist) => ( {data?.albumArtists.map((artist) => (
<Command.Item <CommandItemSelectable
key={`artist-${artist.id}`} key={`artist-${artist.id}`}
onSelect={() => { onSelect={() => {
navigate( navigate(
@ -185,30 +196,33 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
}} }}
value={`search-${artist.id}`} value={`search-${artist.id}`}
> >
<LibraryCommandItem {({ isHighlighted }) => (
disabled={artist?.albumCount === 0} <LibraryCommandItem
handlePlayQueueAdd={handlePlayQueueAdd} disabled={artist?.albumCount === 0}
id={artist.id} handlePlayQueueAdd={handlePlayQueueAdd}
imageUrl={artist.imageUrl} id={artist.id}
itemType={LibraryItem.ALBUM_ARTIST} imageUrl={artist.imageUrl}
subtitle={ isHighlighted={isHighlighted}
artist?.albumCount !== undefined && itemType={LibraryItem.ALBUM_ARTIST}
artist?.albumCount !== null subtitle={
? t('entity.albumWithCount', { artist?.albumCount !== undefined &&
count: artist.albumCount, artist?.albumCount !== null
}) ? t('entity.albumWithCount', {
: undefined count: artist.albumCount,
} })
title={artist.name} : undefined
/> }
</Command.Item> title={artist.name}
/>
)}
</CommandItemSelectable>
))} ))}
</Command.Group> </Command.Group>
)} )}
{showTrackGroup && ( {showTrackGroup && (
<Command.Group heading="Tracks"> <Command.Group heading="Tracks">
{data?.songs.map((song) => ( {data?.songs.map((song) => (
<Command.Item <CommandItemSelectable
key={`artist-${song.id}`} key={`artist-${song.id}`}
onSelect={() => { onSelect={() => {
navigate( navigate(
@ -221,17 +235,20 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
}} }}
value={`search-${song.id}`} value={`search-${song.id}`}
> >
<LibraryCommandItem {({ isHighlighted }) => (
handlePlayQueueAdd={handlePlayQueueAdd} <LibraryCommandItem
id={song.id} handlePlayQueueAdd={handlePlayQueueAdd}
imageUrl={song.imageUrl} id={song.id}
itemType={LibraryItem.SONG} imageUrl={song.imageUrl}
subtitle={song.artists isHighlighted={isHighlighted}
.map((artist) => artist.name) itemType={LibraryItem.SONG}
.join(', ')} subtitle={song.artists
title={song.name} .map((artist) => artist.name)
/> .join(', ')}
</Command.Item> title={song.name}
/>
)}
</CommandItemSelectable>
))} ))}
</Command.Group> </Command.Group>
)} )}

34
src/renderer/features/search/components/library-command-item.tsx
View file

@ -1,4 +1,4 @@
import { CSSProperties, MouseEvent, useCallback, useState } from 'react'; import { CSSProperties, SyntheticEvent, useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import styles from './library-command-item.module.css'; import styles from './library-command-item.module.css';
@ -16,6 +16,7 @@ interface LibraryCommandItemProps {
handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void; handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
id: string; id: string;
imageUrl: null | string; imageUrl: null | string;
isHighlighted?: boolean;
itemType: LibraryItem; itemType: LibraryItem;
subtitle?: string; subtitle?: string;
title?: string; title?: string;
@ -26,6 +27,7 @@ export const LibraryCommandItem = ({
handlePlayQueueAdd, handlePlayQueueAdd,
id, id,
imageUrl, imageUrl,
isHighlighted,
itemType, itemType,
subtitle, subtitle,
title, title,
@ -33,7 +35,7 @@ export const LibraryCommandItem = ({
const { t } = useTranslation(); const { t } = useTranslation();
const handlePlay = useCallback( const handlePlay = useCallback(
(e: MouseEvent, id: string, playType: Play) => { (e: SyntheticEvent, id: string, playType: Play) => {
e.stopPropagation(); e.stopPropagation();
handlePlayQueueAdd?.({ handlePlayQueueAdd?.({
byItemType: { byItemType: {
@ -48,6 +50,8 @@ export const LibraryCommandItem = ({
const [isHovered, setIsHovered] = useState(false); const [isHovered, setIsHovered] = useState(false);
const showControls = isHighlighted || isHovered;
return ( return (
<Flex <Flex
gap="xl" gap="xl"
@ -73,13 +77,19 @@ export const LibraryCommandItem = ({
</Text> </Text>
</div> </div>
</div> </div>
{isHovered && ( {showControls && (
<Group align="center" gap="sm" justify="flex-end" wrap="nowrap"> <Group align="center" gap="sm" justify="flex-end" wrap="nowrap">
<ActionIcon <ActionIcon
disabled={disabled} disabled={disabled}
icon="mediaPlay" icon="mediaPlay"
onClick={(e) => handlePlay(e, id, Play.NOW)} onClick={(e) => handlePlay(e, id, Play.NOW)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
handlePlay(e, id, Play.NOW);
}
}}
size="xs" size="xs"
tabIndex={disabled ? -1 : 0}
tooltip={{ tooltip={{
label: t('player.play', { postProcess: 'sentenceCase' }), label: t('player.play', { postProcess: 'sentenceCase' }),
openDelay: 500, openDelay: 500,
@ -91,7 +101,13 @@ export const LibraryCommandItem = ({
disabled={disabled} disabled={disabled}
icon="mediaShuffle" icon="mediaShuffle"
onClick={(e) => handlePlay(e, id, Play.SHUFFLE)} onClick={(e) => handlePlay(e, id, Play.SHUFFLE)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
handlePlay(e, id, Play.SHUFFLE);
}
}}
size="xs" size="xs"
tabIndex={disabled ? -1 : 0}
tooltip={{ tooltip={{
label: t('player.shuffle', { postProcess: 'sentenceCase' }), label: t('player.shuffle', { postProcess: 'sentenceCase' }),
openDelay: 500, openDelay: 500,
@ -103,7 +119,13 @@ export const LibraryCommandItem = ({
disabled={disabled} disabled={disabled}
icon="mediaPlayLast" icon="mediaPlayLast"
onClick={(e) => handlePlay(e, id, Play.LAST)} onClick={(e) => handlePlay(e, id, Play.LAST)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
handlePlay(e, id, Play.LAST);
}
}}
size="xs" size="xs"
tabIndex={disabled ? -1 : 0}
tooltip={{ tooltip={{
label: t('player.addLast', { postProcess: 'sentenceCase' }), label: t('player.addLast', { postProcess: 'sentenceCase' }),
@ -115,7 +137,13 @@ export const LibraryCommandItem = ({
disabled={disabled} disabled={disabled}
icon="mediaPlayNext" icon="mediaPlayNext"
onClick={(e) => handlePlay(e, id, Play.NEXT)} onClick={(e) => handlePlay(e, id, Play.NEXT)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
handlePlay(e, id, Play.NEXT);
}
}}
size="xs" size="xs"
tabIndex={disabled ? -1 : 0}
tooltip={{ tooltip={{
label: t('player.addNext', { postProcess: 'sentenceCase' }), label: t('player.addNext', { postProcess: 'sentenceCase' }),
openDelay: 500, openDelay: 500,