From baba3b7270890074068451416c2331bc394c2565 Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Sat, 14 Sep 2024 10:48:05 +0200
Subject: [PATCH] fix: rounded mark + little tweaks

---
 src/app/globals.css                            | 4 ++++
 src/components/Search/SearchItem.tsx           | 2 ++
 src/components/Search/SearchModalContainer.tsx | 2 +-
 src/utils/text.ts                              | 4 +++-
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 6af5aca7..d9c3e58e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -36,6 +36,10 @@ main :target {
   }
 }
 
+mark {
+  @apply -m-[--pad] rounded-sm p-[--pad] [--pad:0.05rem];
+}
+
 /**
  * Pmndrs theme for JavaScript, CSS and HTML
  * Loosely based on https://marketplace.visualstudio.com/items?itemName=pmndrs.pmndrs
diff --git a/src/components/Search/SearchItem.tsx b/src/components/Search/SearchItem.tsx
index cd8244e3..95cbe33a 100644
--- a/src/components/Search/SearchItem.tsx
+++ b/src/components/Search/SearchItem.tsx
@@ -30,9 +30,11 @@ function SearchItem({
   className,
   search,
   result,
+  ...props
 }: Omit<ComponentProps<typeof Link>, 'href'> & SearchItemProps) {
   return (
     <Link
+      {...props}
       href={result.url}
       className={cn(className, 'block no-underline')}
       target={result.url.startsWith('http') ? '_blank' : undefined}
diff --git a/src/components/Search/SearchModalContainer.tsx b/src/components/Search/SearchModalContainer.tsx
index 946b7f5e..76584a4e 100644
--- a/src/components/Search/SearchModalContainer.tsx
+++ b/src/components/Search/SearchModalContainer.tsx
@@ -87,7 +87,7 @@ export const SearchModalContainer = ({ className }: ComponentProps<'search'>) =>
                     onSelect={router.push}
                     className="rounded-md transition-colors data-[selected=true]:bg-surface-container-high"
                   >
-                    <SearchItem search={query} result={result} />
+                    <SearchItem search={query} result={result} tabIndex={-1} />
                   </Command.Item>
                 )
               })}
diff --git a/src/utils/text.ts b/src/utils/text.ts
index fda82168..20574f69 100644
--- a/src/utils/text.ts
+++ b/src/utils/text.ts
@@ -7,4 +7,6 @@ export const escape = (text: string) => text.replace(/[|\\{}()[\]^$+*?.]/g, '\\$
  * Bolds matching text, returning HTML.
  */
 export const highlight = (text: string, target: string) =>
-  text.replace(new RegExp(target, 'gi'), (match: string) => `<mark>${match}</mark>`)
+  target.length > 0
+    ? text.replace(new RegExp(target, 'gi'), (match: string) => `<mark>${match}</mark>`)
+    : text