impr(quote-search): use rtl direction when showing rtl text in quote search modal (@Leonabcd123)

frontend/src/html/popups.html

@@ -926,6 +926,7 @@
       <input
         id="searchBox"
         class="searchBox"
+        dir="auto"
         type="text"
         maxlength="200"
         autocomplete="off"
@@ -937,7 +938,7 @@
         <!-- favorites -->
       </button>
     </div>
-    <div id="quoteSearchResults" class="quoteSearchResults"></div>
+    <div dir="auto" id="quoteSearchResults" class="quoteSearchResults"></div>
     <div id="quoteSearchPageNavigator">
       <button class="prevPage" disabled>
         <i class="fas fa-fw fa-chevron-left"></i>

frontend/src/ts/modals/quote-search.ts

@@ -23,19 +23,32 @@ import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
 import * as TestLogic from "../test/test-logic";
 import { createErrorMessage } from "../utils/misc";
 import { highlightMatches } from "../utils/strings";
+import { getLanguage } from "../utils/json-data";
 import { qsr, ElementWithUtils } from "../utils/dom";
 
 const searchServiceCache: Record<string, SearchService<Quote>> = {};
 
 const pageSize = 100;
 let currentPageNumber = 1;
 let usingCustomLength = true;
+let dataBalloonDirection = "left";
 let quotes: Quote[];
 
 async function updateQuotes(): Promise<void> {
   ({ quotes } = await QuotesController.getQuotes(Config.language));
 }
 
+async function updateTooltipDirection(): Promise<void> {
+  const quotesLanguage = await getLanguage(Config.language);
+  const quotesLanguageIsRTL = quotesLanguage?.rightToLeft ?? false;
+
+  if (quotesLanguageIsRTL) {
+    dataBalloonDirection = "right";
+  } else {
+    dataBalloonDirection = "left";
+  }
+}
+
 function getSearchService<T>(
   language: string,
   data: T[],
@@ -186,13 +199,13 @@ function buildQuoteSearchResult(
 
     <div class="textButton report ${
       loggedOut && "hidden"
-    }" aria-label="Report quote" data-balloon-pos="left">
+    }" aria-label="Report quote" data-balloon-pos=${dataBalloonDirection}>
       <i class="fas fa-flag report"></i>
     </div>
 
     <div class="textButton favorite ${
       loggedOut && "hidden"
-    }" aria-label="Favorite quote" data-balloon-pos="left">
+    }" aria-label="Favorite quote" data-balloon-pos=${dataBalloonDirection}>
       <i class="${isFav ? "fas" : "far"} fa-heart favorite"></i>
     </div>
 
@@ -420,7 +433,8 @@ export async function show(showOptions?: ShowOptions): Promise<void> {
       });
     },
     afterAnimation: async () => {
-      void updateQuotes();
+      await updateTooltipDirection();
+      await updateQuotes();
     },
   });
 }