fix: rounded mark + little tweaks

Author: abernier

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

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}

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>
                 )
               })}

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