Refactor dataset search and sorting functionality, add share query button, update findSimilarFromResult function, improve dataset suggestions handling, make the page mobile friendly, and refactor dataset input to include trending dataset suggestions.

index.html

@@ -246,14 +246,6 @@
                           <span class="bg-blue-50 px-2 py-1 rounded text-sm">
                               ${(result.similarity * 100).toFixed(1)}% match
                           </span>
-                          <button 
-                              onclick="shareResult('${result.dataset_id}')"
-                              class="flex items-center gap-1 text-sm text-blue-500 hover:text-blue-700"
-                              title="Share link to these search results"
-                          >
-                              <i data-lucide="share-2"></i>
-                              Share Results
-                          </button>
                           <button 
                               onclick="findSimilarFromResult('${
                                 result.dataset_id
@@ -500,11 +492,11 @@
                 } results</span>
                 <button 
                   onclick="shareResults()"
-                  class="flex items-center gap-1 text-sm text-blue-500 hover:text-blue-700"
-                  title="Share link to these search results"
+                  class="flex items-center gap-1 text-sm px-3 py-1.5 bg-white border border-gray-200 rounded-lg hover:bg-gray-50"
+                  title="Copy link to these search results"
                 >
-                  <i data-lucide="share-2"></i>
-                  Share Results
+                  <i data-lucide="link"></i>
+                  Copy Search Link
                 </button>
               </div>
             </div>
@@ -513,43 +505,43 @@
               results.length >= RESULTS_PER_PAGE * page &&
               RESULTS_PER_PAGE * (page + 1) <= MAX_RESULTS
                 ? `<div class="mt-4 flex items-center justify-between">
-                    <button
-                      onclick="loadMore()"
-                      class="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors flex items-center gap-2"
-                    >
-                      <i data-lucide="more-horizontal"></i>
-                      Load More Results
-                    </button>
+                  <button
+                    onclick="loadMore()"
+                    class="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors flex items-center gap-2"
+                  >
+                    <i data-lucide="more-horizontal"></i>
+                    Load More Results
+                  </button>
+                  <button 
+                    onclick="shareResults()"
+                    class="flex items-center gap-1 text-sm px-3 py-1.5 bg-white border border-gray-200 rounded-lg hover:bg-gray-50"
+                    title="Copy link to these search results"
+                  >
+                    <i data-lucide="link"></i>
+                    Copy Search Link
+                  </button>
+                </div>`
+                : results.length >= MAX_RESULTS
+                ? `<div class="text-center mt-4 p-6 bg-blue-50 rounded-lg">
+                  <p class="text-gray-700 mb-3">You've reached the end of our dataset journey! (${MAX_RESULTS} results)</p>
+                  <p class="text-gray-600 mb-4">Can't find what you're looking for? Why not create and share your own dataset?</p>
+                  <div class="flex items-center justify-center gap-4">
+                    <a href="https://huggingface.co/docs/datasets/upload_dataset" 
+                       target="_blank" 
+                       class="inline-flex items-center gap-2 text-blue-500 hover:text-blue-700">
+                      <i data-lucide="external-link"></i>
+                      Learn how to share your dataset on Hugging Face
+                    </a>
                     <button 
                       onclick="shareResults()"
-                      class="flex items-center gap-1 text-sm text-blue-500 hover:text-blue-700"
-                      title="Share link to these search results"
+                      class="flex items-center gap-1 text-sm px-3 py-1.5 bg-white border border-gray-200 rounded-lg hover:bg-gray-50"
+                      title="Copy link to these search results"
                     >
-                      <i data-lucide="share-2"></i>
-                      Share Results
+                      <i data-lucide="link"></i>
+                      Copy Search Link
                     </button>
-                  </div>`
-                : results.length >= MAX_RESULTS
-                ? `<div class="text-center mt-4 p-6 bg-blue-50 rounded-lg">
-                    <p class="text-gray-700 mb-3">You've reached the end of our dataset journey! (${MAX_RESULTS} results)</p>
-                    <p class="text-gray-600 mb-4">Can't find what you're looking for? Why not create and share your own dataset?</p>
-                    <div class="flex items-center justify-center gap-4">
-                      <a href="https://huggingface.co/docs/datasets/upload_dataset" 
-                         target="_blank" 
-                         class="inline-flex items-center gap-2 text-blue-500 hover:text-blue-700">
-                        <i data-lucide="external-link"></i>
-                        Learn how to share your dataset on Hugging Face
-                      </a>
-                      <button 
-                        onclick="shareResults()"
-                        class="flex items-center gap-1 text-blue-500 hover:text-blue-700"
-                        title="Share link to these search results"
-                      >
-                        <i data-lucide="share-2"></i>
-                        Share Results
-                      </button>
-                    </div>
-                  </div>`
+                  </div>
+                </div>`
                 : ""
             }
           `;
@@ -649,30 +641,35 @@
         }
 
         try {
-          if (navigator.share) {
-            // Use native sharing on supported devices
-            await navigator.share({
-              title: "Hub Semantic Search",
-              text: "Check out these dataset search results",
-              url: currentURL.toString(),
-            });
-          } else {
-            // Fallback to clipboard copy
-            await navigator.clipboard.writeText(currentURL.toString());
+          await navigator.clipboard.writeText(currentURL.toString());
 
-            // Show temporary success message
-            const button = event.target.closest("button");
+          // Show success message
+          const buttons = document.querySelectorAll(
+            'button[onclick="shareResults()"]'
+          );
+          buttons.forEach((button) => {
             const originalHTML = button.innerHTML;
-            button.innerHTML = '<i data-lucide="check"></i> Copied!';
+            button.innerHTML =
+              '<i data-lucide="check"></i> Search Link Copied!';
+            button.classList.add(
+              "bg-green-50",
+              "border-green-200",
+              "text-green-600"
+            );
             lucide.createIcons();
 
             setTimeout(() => {
               button.innerHTML = originalHTML;
+              button.classList.remove(
+                "bg-green-50",
+                "border-green-200",
+                "text-green-600"
+              );
               lucide.createIcons();
             }, 2000);
-          }
+          });
         } catch (error) {
-          console.error("Error sharing:", error);
+          console.error("Error copying to clipboard:", error);
         }
       }