diff --git a/src/renderer/features/search/components/home-commands.tsx b/src/renderer/features/search/components/home-commands.tsx index ef9a4053..71cb969e 100644 --- a/src/renderer/features/search/components/home-commands.tsx +++ b/src/renderer/features/search/components/home-commands.tsx @@ -1,6 +1,9 @@ import { openModal, closeAllModals } from '@mantine/modals'; +import { nanoid } from 'nanoid/non-secure'; import { Dispatch, useCallback } from 'react'; -import { useNavigate } from 'react-router'; +import { generatePath, useNavigate } from 'react-router'; +import { createSearchParams } from 'react-router-dom'; +import { LibraryItem } from '/@/renderer/api/types'; import { CreatePlaylistForm } from '/@/renderer/features/playlists'; import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command'; import { AppRoute } from '/@/renderer/router/routes'; @@ -35,11 +38,23 @@ export const HomeCommands = ({ }); }, [handleClose, server?.type]); - const handleSearch = useCallback(() => { - navigate(AppRoute.SEARCH); + const handleSearch = () => { + navigate( + { + pathname: generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG }), + search: createSearchParams({ + query, + }).toString(), + }, + { + state: { + navigationId: nanoid(), + }, + }, + ); handleClose(); setQuery(''); - }, [handleClose, navigate, setQuery]); + }; return ( <> diff --git a/src/renderer/features/search/components/library-command-item.tsx b/src/renderer/features/search/components/library-command-item.tsx index 74fc0f43..7253e6ed 100644 --- a/src/renderer/features/search/components/library-command-item.tsx +++ b/src/renderer/features/search/components/library-command-item.tsx @@ -10,9 +10,11 @@ import { } from 'react-icons/ri'; import styled from 'styled-components'; import { LibraryItem } from '/@/renderer/api/types'; -import { Button, MotionFlex, Text } from '/@/renderer/components'; +import { Button, Text } from '/@/renderer/components'; import { Play, PlayQueueAddOptions } from '/@/renderer/types'; +const Item = styled(Flex)``; + const ItemGrid = styled.div<{ height: number }>` display: grid; grid-auto-columns: 1fr; @@ -47,6 +49,8 @@ const StyledImage = styled.img` border-radius: 4px; `; +const ActionsContainer = styled(Flex)``; + interface LibraryCommandItemProps { handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void; id: string; @@ -99,7 +103,7 @@ export const LibraryCommandItem = ({ ); return ( - - - - + + ); };