Updates

quran · Dec 30, 2024 · 5ef3dc0 · 5ef3dc0
1 parent 555f002
commit 5ef3dc0
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 9 deletions.
diff --git a/src/components/HomePage/HomePageHero.tsx b/src/components/HomePage/HomePageHero.tsx
@@ -20,7 +20,7 @@ const HomePageHero = () => {
       <div>
         <PlayRadioButton />
         <div className={styles.innerContainer}>
-          <SearchInput placeholder={t('command-bar.placeholder')} />
+          <SearchInput placeholder={t('command-bar.placeholder')} shouldExpandOnClick />
           <div className={styles.quickLinksContainer}>
             <QuickLinks />
           </div>

diff --git a/src/components/Search/CommandBar/CommandsList/index.tsx b/src/components/Search/CommandBar/CommandsList/index.tsx
@@ -24,6 +24,7 @@ import {
 import SearchQuerySource from '@/types/SearchQuerySource';
 import { logButtonClick } from '@/utils/eventLogger';
 import { resolveUrlBySearchNavigationType } from '@/utils/navigation';
+import { getResultType } from '@/utils/search';
 import { SearchNavigationResult, SearchNavigationType } from 'types/Search/SearchNavigationResult';
 
 export interface Command extends SearchNavigationResult {
@@ -173,7 +174,7 @@ const CommandsList: React.FC<Props> = ({
               )}
               <ul role="group" aria-labelledby={commandGroup}>
                 {groups[commandGroup].map((command) => {
-                  const { name, resultType, key, index, isVoiceSearch } = command;
+                  const { name, key, index, isVoiceSearch } = command;
                   const isSelected = selectedCommandIndex === index;
                   return (
                     <li
@@ -189,7 +190,7 @@ const CommandsList: React.FC<Props> = ({
                         navigationKey={key}
                         isVoiceSearch={isVoiceSearch}
                         name={name}
-                        type={resultType}
+                        type={getResultType(command)}
                       />
                       <div className={styles.keyboardInputContainer}>
                         <CommandControl

diff --git a/src/components/Search/SearchInput/index.tsx b/src/components/Search/SearchInput/index.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { useDispatch, useSelector } from 'react-redux';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 
 import styles from './SearchInput.module.scss';
 
@@ -13,14 +13,21 @@ import KeyboardInput from '@/dls/KeyboardInput';
 import useOutsideClickDetector from '@/hooks/useOutsideClickDetector';
 import SearchIcon from '@/icons/search.svg';
 import { selectIsExpanded, setIsExpanded } from '@/redux/slices/CommandBar/state';
+import { selectIsCommandBarVoiceFlowStarted } from '@/redux/slices/voiceSearch';
 import { logButtonClick } from '@/utils/eventLogger';
 
 type Props = {
   placeholder?: string;
   initialSearchQuery?: string;
+  shouldExpandOnClick?: boolean;
 };
 
-const SearchInput: React.FC<Props> = ({ placeholder, initialSearchQuery }) => {
+const SearchInput: React.FC<Props> = ({
+  placeholder,
+  initialSearchQuery,
+  shouldExpandOnClick = false,
+}) => {
+  const isVoiceSearchFlowStarted = useSelector(selectIsCommandBarVoiceFlowStarted, shallowEqual);
   const [searchQuery, setSearchQuery] = useState<string>(initialSearchQuery || '');
   const isExpanded = useSelector(selectIsExpanded);
   const dispatch = useDispatch();
@@ -61,14 +68,22 @@ const SearchInput: React.FC<Props> = ({ placeholder, initialSearchQuery }) => {
     );
   };
 
+  const onInputClick = () => {
+    if (shouldExpandOnClick) {
+      dispatch({ type: setIsExpanded.type, payload: true });
+    }
+  };
+
   return (
     <div
       ref={containerRef}
       className={classNames(styles.headerOuterContainer, { [styles.expanded]: isExpanded })}
     >
       <div className={styles.inputContainer}>
         <Input
+          onClick={onInputClick}
           id="searchQuery"
+          disabled={isVoiceSearchFlowStarted}
           onChange={onSearchQueryChange}
           value={searchQuery}
           placeholder={placeholder}

diff --git a/src/components/Search/SearchResults/SearchResultsHeader/SearchResultsHeader.module.scss b/src/components/Search/SearchResults/SearchResultsHeader/SearchResultsHeader.module.scss
@@ -30,7 +30,6 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    color: var(--color-text-faded);
     padding-block-end: var(--spacing-small);
 }
 

diff --git a/src/components/dls/Forms/Input/index.tsx b/src/components/dls/Forms/Input/index.tsx
@@ -46,6 +46,7 @@ interface Props {
   suffix?: ReactNode;
   onClearClicked?: () => void;
   onChange?: (value: string) => void;
+  onClick?: () => void;
   onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
   inputMode?: HTMLAttributes<HTMLInputElement>['inputMode'];
   value?: string;
@@ -77,6 +78,7 @@ const Input: React.FC<Props> = ({
   onClearClicked,
   onChange,
   onKeyDown,
+  onClick,
   inputMode,
   value = '',
   shouldFlipOnRTL = true,
@@ -101,6 +103,12 @@ const Input: React.FC<Props> = ({
     }
   };
 
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    }
+  };
+
   // eslint-disable-next-line react/no-multi-comp
   const Suffix = () => (
     <>
@@ -123,7 +131,6 @@ const Input: React.FC<Props> = ({
           [styles.mediumContainer]: size === InputSize.Medium,
           [styles.largeContainer]: size === InputSize.Large,
           [styles.fixedWidth]: fixedWidth,
-          [styles.disabled]: disabled,
           [styles.error]: type === InputType.Error,
           [styles.success]: type === InputType.Success,
           [styles.warning]: type === InputType.Warning,
@@ -142,11 +149,13 @@ const Input: React.FC<Props> = ({
           </div>
         )}
         <input
+          onClick={handleClick}
           className={classNames(styles.input, {
             [styles.error]: type === InputType.Error,
             [styles.success]: type === InputType.Success,
             [styles.warning]: type === InputType.Warning,
             [styles.rtlInput]: shouldFlipOnRTL,
+            [styles.disabled]: disabled,
           })}
           type={htmlType}
           required={isRequired}

diff --git a/src/utils/search.ts b/src/utils/search.ts
@@ -164,11 +164,15 @@ export const getSearchNavigationResult = (
     };
   }
 
-  if (resultType === SearchNavigationType.AYAH) {
+  if (
+    resultType === SearchNavigationType.AYAH ||
+    resultType === SearchNavigationType.TRANSLITERATION ||
+    resultType === SearchNavigationType.TRANSLATION
+  ) {
     returnedResult = {
       name: result.name,
       key,
-      resultType: SearchNavigationType.AYAH,
+      resultType,
     };
   }