feat: add a search modal using the database (wip)

inertia/components/dashboard/collection/list/collection_item.tsx

@@ -1,17 +1,21 @@
 import type Collection from '#models/collection';
 import styled from '@emotion/styled';
+import { Link } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
 import { AiFillFolderOpen, AiOutlineFolder } from 'react-icons/ai';
 import TextEllipsis from '~/components/common/text_ellipsis';
 import { Item } from '~/components/dashboard/side_nav/nav_item';
 import useActiveCollection from '~/hooks/use_active_collection';
+import { appendCollectionId } from '~/lib/navigation';
 
-const CollectionItemStyle = styled(Item)<{ isActive: boolean }>(
-  ({ theme, isActive }) => ({
-    cursor: 'pointer',
-    color: isActive ? theme.colors.primary : theme.colors.font,
-    backgroundColor: theme.colors.secondary,
-  })
-);
+const CollectionItemStyle = styled(Item, {
+  shouldForwardProp: (propName) => propName !== 'isActive',
+})<{ isActive: boolean }>(({ theme, isActive }) => ({
+  cursor: 'pointer',
+  color: isActive ? theme.colors.primary : theme.colors.font,
+  backgroundColor: theme.colors.secondary,
+}));
+const CollectionItemLink = CollectionItemStyle.withComponent(Link);
 
 const LinksCount = styled.div(({ theme }) => ({
   minWidth: 'fit-content',
@@ -25,13 +29,13 @@ export default function CollectionItem({
 }: {
   collection: Collection;
 }) {
-  const { activeCollection, setActiveCollection } = useActiveCollection();
+  const { activeCollection } = useActiveCollection();
   const isActiveCollection = collection.id === activeCollection?.id;
   const FolderIcon = isActiveCollection ? AiFillFolderOpen : AiOutlineFolder;
 
   return (
-    <CollectionItemStyle
-      onClick={() => setActiveCollection(collection)}
+    <CollectionItemLink
+      href={appendCollectionId(route('dashboard').url, collection.id)}
       isActive={isActiveCollection}
     >
       <FolderIcon css={{ minWidth: '24px' }} size={24} />
@@ -39,6 +43,6 @@ export default function CollectionItem({
       {collection.links.length > 0 && (
         <LinksCount>— {collection.links.length}</LinksCount>
       )}
-    </CollectionItemStyle>
+    </CollectionItemLink>
   );
 }