use Link

apps/client/src/features/search/search-spotlight.tsx

@@ -2,7 +2,7 @@ import { Group, Center, Text } from "@mantine/core";
 import { Spotlight } from "@mantine/spotlight";
 import { IconSearch } from "@tabler/icons-react";
 import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { useDebouncedValue } from "@mantine/hooks";
 import { usePageSearchQuery } from "@/features/search/queries/search-query";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
@@ -15,7 +15,6 @@ interface SearchSpotlightProps {
 }
 export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const [query, setQuery] = useState("");
   const [debouncedSearchQuery] = useDebouncedValue(query, 300);
 
@@ -29,9 +28,10 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
   ).map((page) => (
     <Spotlight.Action
       key={page.id}
-      onClick={() =>
-        navigate(buildPageUrl(page.space.slug, page.slugId, page.title))
-      }
+      component={Link}
+      //@ts-ignore
+      to={buildPageUrl(page.space.slug, page.slugId, page.title)}
+      style={{ userSelect: "none" }}
     >
       <Group wrap="nowrap" w="100%">
         <Center>{getPageIcon(page?.icon)}</Center>