Add state to search route navigation

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

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 (
-    <Flex
+    <Item
       gap="xl"
       justify="space-between"
       style={{ height: '40px', width: '100%' }}
@@ -141,7 +145,7 @@ export const LibraryCommandItem = ({
           </Text>
         </MetadataWrapper>
       </ItemGrid>
-      <MotionFlex
+      <ActionsContainer
         align="center"
         gap="sm"
         justify="flex-end"
@@ -173,7 +177,7 @@ export const LibraryCommandItem = ({
         >
           <RiAddCircleFill />
         </Button>
-      </MotionFlex>
-    </Flex>
+      </ActionsContainer>
+    </Item>
   );
 };