From f93d18e3e5171a5a29a3f6c9b086a2f7e81dc47d Mon Sep 17 00:00:00 2001
From: Ben Fornefeld <ben.fornefeld@gmail.com>
Date: Fri, 10 Jan 2025 23:32:42 +0100
Subject: [PATCH] add: sort legacy docs search results at last + improve: docs
 search legacy badge

---
 apps/web/src/components/Search.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/Search.tsx b/apps/web/src/components/Search.tsx
index 858499033..8e1ac9c15 100644
--- a/apps/web/src/components/Search.tsx
+++ b/apps/web/src/components/Search.tsx
@@ -83,7 +83,12 @@ function useAutocomplete({ close }: { close: () => void }) {
             {
               sourceId: 'documentation',
               getItems() {
-                return search(query, { limit: 5 })
+                const results = search(query, { limit: 5 })
+                return results.sort((a, b) => {
+                  if (a.badge === 'Legacy' && b.badge !== 'Legacy') return 1
+                  if (a.badge !== 'Legacy' && b.badge === 'Legacy') return -1
+                  return 0
+                })
               },
               getItemUrl({ item }) {
                 return item.url
@@ -210,7 +215,7 @@ function SearchResult({
   return (
     <li
       className={clsx(
-        'group block cursor-default px-4 py-3 aria-selected:bg-zinc-50 dark:aria-selected:bg-zinc-800/50',
+        'group block relative cursor-default px-4 py-3 aria-selected:bg-zinc-50 dark:aria-selected:bg-zinc-800/50',
         resultIndex > 0 && 'border-t border-zinc-100 dark:border-zinc-800'
       )}
       aria-labelledby={`${id}-hierarchy ${id}-title`}
@@ -255,7 +260,7 @@ function SearchResult({
       )}
       {result.badge === 'Legacy' && (
         <div className="absolute top-3 right-4">
-          <span className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-xs font-medium bg-primary text-primary-foreground hover:bg-primary/90 px-2 py-1">
+          <span className="rounded-full text-xs bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-brand-400/10 dark:text-brand-400 dark:ring-1 dark:ring-inset dark:ring-brand-400/20 dark:hover:bg-brand-400/10 dark:hover:text-brand-300 dark:hover:ring-brand-300">
             {result.badge}
           </span>
         </div>