antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 10:53:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

support tab navigation on ActionIcons in command palette

Browse source
This commit is contained in:
DerPenz 2025-07-26 14:01:05 +02:00
parent d28054cc7f
commit 33af5e625b
3 changed files with 127 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

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 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,