impr(quote search): add pagination to search results (Shuja-Mahmood) (#4577)

* Added page navigation for quotes search

* using fixed width icons

* style adjustment

---------

Co-authored-by: Miodec <jack@monkeytype.com>

frontend/src/styles/popups.scss

@@ -803,10 +803,28 @@
       }
     }
 
-    #extraResults {
-      text-align: center;
-      color: var(--sub-color);
+    #quoteSearchPageNavigator {
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
     }
+
+    .prevPage,
+    .nextPage {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+
+    #pageInfo {
+      flex: 1;
+      text-align: center;
+      max-width: 20rem;
+      color: var(--sub-color);
+      padding: 0.5rem 1.5rem;
+    }
+
     #quoteSearchResults {
       display: grid;
       gap: 0.5rem;

frontend/src/ts/popups/quote-search-popup.ts

@@ -30,6 +30,9 @@ export function setSelectedId(val: number): void {
 
 const searchServiceCache: Record<string, SearchService<MonkeyTypes.Quote>> = {};
 
+const pageSize = 100;
+let currentPageNumber = 1;
+
 function getSearchService<T>(
   language: string,
   data: T[],
@@ -176,18 +179,33 @@ async function updateResults(searchText: string): Promise<void> {
   const resultsList = $("#quoteSearchResults");
   resultsList.empty();
 
-  quotesToShow.slice(0, 100).forEach((quote) => {
+  const totalPages = Math.ceil(quotesToShow.length / pageSize);
+
+  $("#quoteSearchPageNavigator .nextPage").toggleClass(
+    "disabled",
+    currentPageNumber >= totalPages
+  );
+  $("#quoteSearchPageNavigator .prevPage").toggleClass(
+    "disabled",
+    currentPageNumber <= 1
+  );
+
+  if (quotesToShow.length === 0) {
+    $("#pageInfo").html("No search results");
+    return;
+  }
+
+  const startIndex = (currentPageNumber - 1) * pageSize;
+  const endIndex = Math.min(currentPageNumber * pageSize, quotesToShow.length);
+
+  $("#pageInfo").html(
+    `${startIndex + 1} - ${endIndex} of ${quotesToShow.length}`
+  );
+
+  quotesToShow.slice(startIndex, endIndex).forEach((quote) => {
     const quoteSearchResult = buildQuoteSearchResult(quote, matchedQueryTerms);
     resultsList.append(quoteSearchResult);
   });
-
-  const resultsExceededText =
-    quotesToShow.length > 100
-      ? "<span style='opacity: 0.5'>(only showing 100)</span>"
-      : "";
-  $("#extraResults").html(
-    `${quotesToShow.length} result(s) ${resultsExceededText}`
-  );
 }
 
 export async function show(clearText = true): Promise<void> {
@@ -251,6 +269,7 @@ export async function show(clearText = true): Promise<void> {
         if (clearText) {
           $("#quoteSearchPopup input").trigger("focus").trigger("select");
         }
+        currentPageNumber = 1;
         updateResults(quoteSearchInputValue);
       });
   }
@@ -303,6 +322,7 @@ export function apply(val: number): boolean {
 const searchForQuotes = debounce(250, (): void => {
   const searchText = (<HTMLInputElement>document.getElementById("searchBox"))
     .value;
+  currentPageNumber = 1;
   updateResults(searchText);
 });
 
@@ -313,6 +333,21 @@ $("#quoteSearchPopupWrapper .searchBox").on("keyup", (e) => {
 
 $("#quoteSearchPopupWrapper .quoteLengthFilter").on("change", searchForQuotes);
 
+$(
+  "#quoteSearchPageNavigator .nextPage, #quoteSearchPageNavigator .prevPage"
+).on("click", function () {
+  const searchText = (<HTMLInputElement>document.getElementById("searchBox"))
+    .value;
+
+  if ($(this).hasClass("nextPage")) {
+    currentPageNumber++;
+  } else {
+    currentPageNumber--;
+  }
+
+  updateResults(searchText);
+});
+
 $("#quoteSearchPopupWrapper").on("mousedown", (e) => {
   if ($(e.target).attr("id") === "quoteSearchPopupWrapper") {
     hide();

frontend/static/html/popups.html

@@ -702,8 +702,16 @@
       <select class="quoteLengthFilter"></select>
       <div id="toggleShowFavorites" class="button">Favorites Only</div>
     </div>
-    <div id="extraResults">No search results</div>
     <div id="quoteSearchResults" class="quoteSearchResults"></div>
+    <div id="quoteSearchPageNavigator">
+      <div class="button prevPage disabled">
+        <i class="fas fa-fw fa-chevron-left"></i>
+      </div>
+      <div id="pageInfo">No search results</div>
+      <div class="button nextPage disabled">
+        <i class="fas fa-fw fa-chevron-right"></i>
+      </div>
+    </div>
   </div>
 </div>
 <div id="quoteSubmitPopupWrapper" class="popupWrapper hidden">