Refactor search functionality with new switchSearchType method and reduced API query limit

index.html

@@ -145,6 +145,12 @@
           this.themes = data.themes;
           this.totalPages = data.totalPages;
         },
+        async switchSearchType(type) {
+          this.searchType = type;
+          if (this.searchQuery) {
+            await this.searchThemes();
+          }
+        },
         async getThemes(page, sort, useTestData) {
           let data;
           if (useTestData) {
@@ -159,10 +165,10 @@
               if (this.searchType === 'semantic') {
                 searchUrl = `https://huggingface.co/api/spaces/semantic-search?q=${encodeURIComponent(this.searchQuery)}`;
               } else {
-                searchUrl = `https://huggingface.co/api/spaces?limit=500&filter=${searchFilters}&search=${encodeURIComponent(this.searchQuery)}&expand[]=subdomain&expand[]=lastModified&expand[]=likes&expand[]=runtime`;
+                searchUrl = `https://huggingface.co/api/spaces?limit=100&filter=${searchFilters}&search=${encodeURIComponent(this.searchQuery)}&expand[]=subdomain&expand[]=lastModified&expand[]=likes&expand[]=runtime`;
               }
             } else {
-              searchUrl = `https://huggingface.co/api/spaces?limit=500&filter=${encodeURIComponent(searchFilters)}&expand[]=subdomain&expand[]=lastModified&expand[]=likes&expand[]=runtime`;
+              searchUrl = `https://huggingface.co/api/spaces?limit=100&filter=${encodeURIComponent(searchFilters)}&expand[]=subdomain&expand[]=lastModified&expand[]=likes&expand[]=runtime`;
             }
             const res = await fetch(searchUrl);
             data = await res.json();
@@ -227,14 +233,14 @@
               >
               <div class="flex border border-l-0 rounded-r-lg overflow-hidden">
                 <button
-                  @click="searchType = 'semantic'; searchThemes()"
+                  @click="switchSearchType('semantic')"
                   :class="searchType === 'semantic' ? 'bg-orange-300 text-white' : 'bg-white text-gray-800'"
                   class="px-3 py-1"
                 >
                   Semantic
                 </button>
                 <button
-                  @click="searchType = 'keyword'; searchThemes()"
+                  @click="switchSearchType('keyword')"
                   :class="searchType === 'keyword' ? 'bg-orange-300 text-white' : 'bg-white text-gray-800'"
                   class="px-3 py-1 border-l"
                 >