Handle isArabic and isTransliteration

src/components/CommandBar/CommandBarBody/index.tsx

@@ -34,16 +34,6 @@ const NAVIGATE_TO = [
     key: '1',
     resultType: SearchNavigationType.JUZ,
   },
-  {
-    name: 'Hizb 1',
-    key: '1',
-    resultType: SearchNavigationType.HIZB,
-  },
-  {
-    name: 'Rub el Hizb 1',
-    key: '1',
-    resultType: SearchNavigationType.RUB_EL_HIZB,
-  },
   {
     name: 'Page 1',
     key: '1',

src/components/CommandBar/index.tsx

@@ -2,14 +2,13 @@
 import React, { useCallback } from 'react';
 
 import dynamic from 'next/dynamic';
-import { useHotkeys } from 'react-hotkeys-hook';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 
 import styles from './CommandBar.module.scss';
 import CommandBarBase from './CommandBarBase/CommandBarBase';
 
 import Spinner from '@/dls/Spinner/Spinner';
-import { selectCommandBarIsOpen, setIsOpen, toggleIsOpen } from '@/redux/slices/CommandBar/state';
+import { selectCommandBarIsOpen, setIsOpen } from '@/redux/slices/CommandBar/state';
 import { stopCommandBarVoiceFlow } from '@/redux/slices/voiceSearch';
 import { logEvent } from '@/utils/eventLogger';
 
@@ -22,31 +21,9 @@ const CommandBarBody = dynamic(() => import('./CommandBarBody'), {
   ),
 });
 
-const getPressedShortcut = (event: KeyboardEvent): string => {
-  let shortcut = '';
-  if (event.metaKey) {
-    shortcut = 'cmd';
-  } else if (event.ctrlKey) {
-    shortcut = 'ctrl';
-  }
-  return `${shortcut}_${event.key}`;
-};
-
 const CommandBar: React.FC = () => {
   const dispatch = useDispatch();
   const isOpen = useSelector(selectCommandBarIsOpen, shallowEqual);
-  const toggleShowCommandBar = useCallback(
-    (event: KeyboardEvent) => {
-      // eslint-disable-next-line i18next/no-literal-string
-      logEvent(`command_bar_${isOpen ? 'close' : 'open'}`, {
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        keyboard_shortcut: getPressedShortcut(event),
-      });
-      event.preventDefault();
-      dispatch({ type: toggleIsOpen.type });
-    },
-    [dispatch, isOpen],
-  );
   const closeCommandBar = useCallback(
     (event?: KeyboardEvent) => {
       const isClickedOutside = !event;
@@ -57,15 +34,6 @@ const CommandBar: React.FC = () => {
     },
     [dispatch],
   );
-  useHotkeys(
-    'meta+k, ctrl+k, meta+p, ctrl+p',
-    toggleShowCommandBar,
-    { enableOnFormTags: ['INPUT'] },
-    [dispatch],
-  );
-  useHotkeys('Escape', closeCommandBar, { enabled: isOpen, enableOnFormTags: ['INPUT'] }, [
-    dispatch,
-  ]);
 
   return (
     <CommandBarBase isOpen={isOpen} onClickOutside={() => closeCommandBar()}>

src/components/GlobalKeyboardListeners.tsx

@@ -1,8 +1,43 @@
-import React from 'react';
+import React, { useCallback } from 'react';
+
+import { useHotkeys } from 'react-hotkeys-hook';
+import { shallowEqual, useSelector, useDispatch } from 'react-redux';
 
 import CommandBar from '@/components/CommandBar';
+import { selectIsSearchDrawerOpen, toggleSearchDrawerIsOpen } from '@/redux/slices/navbar';
+import { logEvent } from '@/utils/eventLogger';
+
+const getPressedShortcut = (event: KeyboardEvent): string => {
+  let shortcut = '';
+  if (event.metaKey) {
+    shortcut = 'cmd';
+  } else if (event.ctrlKey) {
+    shortcut = 'ctrl';
+  }
+  return `${shortcut}_${event.key}`;
+};
 
 const GlobalKeyboardListeners: React.FC = () => {
+  const dispatch = useDispatch();
+  const isOpen = useSelector(selectIsSearchDrawerOpen, shallowEqual);
+  const toggleShowCommandBar = useCallback(
+    (event: KeyboardEvent) => {
+      // eslint-disable-next-line i18next/no-literal-string
+      logEvent(`search_drawer_${isOpen ? 'close' : 'open'}`, {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        keyboard_shortcut: getPressedShortcut(event),
+      });
+      event.preventDefault();
+      dispatch({ type: toggleSearchDrawerIsOpen.type });
+    },
+    [dispatch, isOpen],
+  );
+  useHotkeys(
+    'meta+k, ctrl+k, meta+p, ctrl+p',
+    toggleShowCommandBar,
+    { enableOnFormTags: ['INPUT'] },
+    [dispatch],
+  );
   return (
     <>
       <CommandBar />

src/components/Search/SearchResults/SearchResultItem/SearchResultItem.module.scss

@@ -16,3 +16,7 @@
     display: flex;
     flex-direction: row;
 }
+
+.arabic {
+    direction: rtl;
+}

src/components/Search/SearchResults/SearchResultItem/index.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-danger */
 import React, { useContext } from 'react';
 
+import classNames from 'classnames';
 import useTranslation from 'next-translate/useTranslation';
 
 import SearchResultItemIcon from '../SearchResultItemIcon';
@@ -9,23 +10,23 @@ import styles from './SearchResultItem.module.scss';
 
 import DataContext from '@/contexts/DataContext';
 import Link from '@/dls/Link/Link';
-import { SearchNavigationType } from '@/types/Search/SearchNavigationResult';
+import { SearchNavigationResult } from '@/types/Search/SearchNavigationResult';
 import SearchService from '@/types/Search/SearchService';
 import SearchQuerySource from '@/types/SearchQuerySource';
 import { logButtonClick } from '@/utils/eventLogger';
 import { resolveUrlBySearchNavigationType } from '@/utils/navigation';
-import { getResultSuffix } from '@/utils/search';
+import { getResultSuffix, getResultType } from '@/utils/search';
 import { getVerseAndChapterNumbersFromKey } from '@/utils/verse';
 
 interface Props {
-  name: string;
-  resultKey: string | number;
   source: SearchQuerySource;
   service: SearchService;
-  type: SearchNavigationType;
+  result: SearchNavigationResult;
 }
 
-const AyahSearchResultItem: React.FC<Props> = ({ name, source, resultKey, type, service }) => {
+const SearchResultItem: React.FC<Props> = ({ source, service, result }) => {
+  const { name, key: resultKey, isArabic } = result;
+  const type = getResultType(result);
   const { lang } = useTranslation();
   const chaptersData = useContext(DataContext);
   const [surahNumber] = getVerseAndChapterNumbersFromKey(resultKey as string);
@@ -45,6 +46,9 @@ const AyahSearchResultItem: React.FC<Props> = ({ name, source, resultKey, type,
           <SearchResultItemIcon type={type} />
         </div>
         <div
+          className={classNames({
+            [styles.arabic]: isArabic,
+          })}
           dangerouslySetInnerHTML={{
             __html: `${name} ${suffix}`,
           }}
@@ -53,4 +57,4 @@ const AyahSearchResultItem: React.FC<Props> = ({ name, source, resultKey, type,
     </div>
   );
 };
-export default AyahSearchResultItem;
+export default SearchResultItem;

src/components/Search/SearchResults/SearchResultItemIcon/index.tsx

@@ -5,18 +5,23 @@ import JuzIcon from '@/icons/search/juz.svg';
 import PageIcon from '@/icons/search/page.svg';
 import SurahIcon from '@/icons/search/surah.svg';
 import TranslationIcon from '@/icons/search/translation.svg';
+import TransliterationIcon from '@/icons/search/transliteration.svg';
 import SearchIcon from '@/icons/search.svg';
 import { SearchNavigationType } from '@/types/Search/SearchNavigationResult';
 
 const TYPE_ICON_MAP = {
-  [SearchNavigationType.AYAH]: TranslationIcon,
+  [SearchNavigationType.AYAH]: ArabicIcon,
   [SearchNavigationType.SURAH]: SurahIcon,
   [SearchNavigationType.JUZ]: JuzIcon,
   [SearchNavigationType.PAGE]: PageIcon,
   [SearchNavigationType.RANGE]: AyahRangeIcon,
+  // TODO: change this after it's ready
   [SearchNavigationType.RUB_EL_HIZB]: ArabicIcon,
+  // TODO: change this after it's ready
   [SearchNavigationType.HIZB]: ArabicIcon,
   [SearchNavigationType.SEARCH_PAGE]: SearchIcon,
+  [SearchNavigationType.TRANSLITERATION]: TransliterationIcon,
+  [SearchNavigationType.TRANSLATION]: TranslationIcon,
 };
 
 interface Props {

src/components/Search/SearchResults/index.tsx

@@ -60,10 +60,8 @@ const SearchResults: React.FC<Props> = ({
       <>
         {results.map((result) => (
           <SearchResultItem
-            type={result.resultType}
             key={result.key}
-            name={result.name}
-            resultKey={result.key}
+            result={result}
             source={source}
             service={searchResult.service}
           />

src/redux/slices/navbar.ts

@@ -43,6 +43,10 @@ export const navbarSlice = createSlice({
       ...state,
       isSearchDrawerOpen: action.payload,
     }),
+    toggleSearchDrawerIsOpen: (state: Navbar) => ({
+      ...state,
+      isSearchDrawerOpen: !state.isSearchDrawerOpen,
+    }),
     setIsSettingsDrawerOpen: (state: Navbar, action: PayloadAction<boolean>) => ({
       ...state,
       isSettingsDrawerOpen: action.payload,
@@ -60,8 +64,10 @@ export const {
   setIsSearchDrawerOpen,
   setIsSettingsDrawerOpen,
   setSettingsView,
+  toggleSearchDrawerIsOpen,
 } = navbarSlice.actions;
 
 export const selectNavbar = (state: RootState) => state.navbar;
+export const selectIsSearchDrawerOpen = (state: RootState) => state.navbar.isSearchDrawerOpen;
 
 export default navbarSlice.reducer;

src/utils/search.ts

@@ -271,6 +271,20 @@ export const getQuickSearchQuery = (query: string): SearchRequestParams<SearchMo
   };
 };
 
+export const getResultType = (result: SearchNavigationResult) => {
+  const { resultType, isArabic, isTransliteration } = result;
+  if (resultType === SearchNavigationType.AYAH) {
+    if (isArabic) {
+      return SearchNavigationType.AYAH;
+    }
+    if (isTransliteration) {
+      return SearchNavigationType.TRANSLITERATION;
+    }
+    return SearchNavigationType.TRANSLATION;
+  }
+  return resultType;
+};
+
 export const getResultSuffix = (
   type: SearchNavigationType,
   resultKey: string,

types/Search/SearchNavigationResult.ts

@@ -2,16 +2,20 @@ export enum SearchNavigationType {
   SURAH = 'surah',
   JUZ = 'juz',
   HIZB = 'hizb',
-  AYAH = 'ayah',
   RUB_EL_HIZB = 'rub_el_hizb',
   SEARCH_PAGE = 'search_page',
   PAGE = 'page',
   RANGE = 'range',
   HISTORY = 'history',
+  AYAH = 'ayah',
+  TRANSLITERATION = 'transliteration',
+  TRANSLATION = 'translation',
 }
 
 export interface SearchNavigationResult {
   resultType: SearchNavigationType;
   name: string;
   key: number | string;
+  isArabic?: boolean;
+  isTransliteration?: boolean;
 }