quran · osamasayed · Feb 23, 2025 · Feb 23, 2025
diff --git a/src/components/Navbar/SearchDrawer/Footer/Footer.module.scss b/src/components/Navbar/SearchDrawer/Footer/Footer.module.scss
@@ -1,5 +1,10 @@
+@use "src/styles/breakpoints";
+
 .container {
-  padding-block-end: var(--spacing-mega);
+  @include breakpoints.tablet {
+    padding-block-end: var(--spacing-mega);
+  }
+  padding-block-end: calc(4 * var(--spacing-mega));
 }
 
 .betaContainer {

diff --git a/src/components/Navbar/SearchDrawer/Header/Header.module.scss b/src/components/Navbar/SearchDrawer/Header/Header.module.scss
@@ -34,3 +34,7 @@
   max-height: var(--spacing-mega);
   margin-inline: calc(0.5 * var(--spacing-xxsmall));
 }
+
+.form {
+  display: contents;
+}
diff --git a/src/components/Navbar/SearchDrawer/Header/index.tsx b/src/components/Navbar/SearchDrawer/Header/index.tsx
@@ -1,6 +1,7 @@
 import React, { RefObject } from 'react';
 
 import classNames from 'classnames';
+import { useRouter } from 'next/router';
 import useTranslation from 'next-translate/useTranslation';
 
 import DrawerSearchIcon from '../Buttons/DrawerSearchIcon';
@@ -10,6 +11,7 @@ import styles from './Header.module.scss';
 import TarteelVoiceSearchTrigger from '@/components/TarteelVoiceSearch/Trigger';
 import Separator from '@/dls/Separator/Separator';
 import { logButtonClick } from '@/utils/eventLogger';
+import { getSearchQueryNavigationUrl } from '@/utils/navigation';
 
 interface Props {
   isVoiceFlowStarted: boolean;
@@ -29,10 +31,14 @@ const Header: React.FC<Props> = ({
   searchQuery,
 }) => {
   const { t } = useTranslation('common');
+  const router = useRouter();
 
-  const onKeyboardReturnPressed = (e) => {
+  const onSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    inputRef.current.blur();
+    inputRef.current?.blur();
+    if (searchQuery) {
+      router.push(getSearchQueryNavigationUrl(searchQuery));
+    }
   };
 
   return (
@@ -47,7 +53,7 @@ const Header: React.FC<Props> = ({
         <>
           <DrawerSearchIcon />
           <div className={classNames(styles.searchInputContainer)}>
-            <form onSubmit={onKeyboardReturnPressed}>
+            <form onSubmit={onSubmit} className={styles.from}>
               <input
                 className={styles.searchInput}
                 type="search"

diff --git a/src/components/Navbar/SearchDrawer/SearchDrawer.tsx b/src/components/Navbar/SearchDrawer/SearchDrawer.tsx
@@ -138,7 +138,6 @@ const SearchDrawer: React.FC = () => {
               <VoiceSearchBodyContainer />
             ) : (
               <SearchBodyContainer
-                onSearchResultClicked={() => searchInputRef?.current?.blur()}
                 onSearchKeywordClicked={onSearchKeywordClicked}
                 searchQuery={searchQuery}
                 searchResult={searchResult}

diff --git a/src/components/Search/CommandBar/CommandsList/index.tsx b/src/components/Search/CommandBar/CommandsList/index.tsx
@@ -14,14 +14,12 @@ import CommandControl from './CommandControl';
 import styles from './CommandList.module.scss';
 import CommandPrefix from './CommandPrefix';
 
-import SearchResultsHeader from '@/components/Search/SearchResults/SearchResultsHeader';
 import useScroll, { SMOOTH_SCROLL_TO_CENTER } from '@/hooks/useScrollToElement';
 import {
   addRecentNavigation,
   removeRecentNavigation,
   setIsExpanded,
 } from '@/redux/slices/CommandBar/state';
-import SearchQuerySource from '@/types/SearchQuerySource';
 import { logButtonClick } from '@/utils/eventLogger';
 import { getSearchQueryNavigationUrl, resolveUrlBySearchNavigationType } from '@/utils/navigation';
 import { getResultType } from '@/utils/search';
@@ -136,15 +134,6 @@ const CommandsList: React.FC<Props> = ({
     dispatch({ type: removeRecentNavigation.type, payload: navigationItemKey });
   };
 
-  const onSearchResultsHeaderClicked = () => {
-    navigateToLink({
-      name: searchQuery,
-      resultType: SearchNavigationType.SEARCH_PAGE,
-      key: searchQuery,
-      group: RESULTS_GROUP,
-    });
-  };
-
   if (numberOfCommands === 0) {
     return <p className={styles.noResult}>{t('command-bar.no-nav-results')}</p>;
   }
@@ -159,13 +148,7 @@ const CommandsList: React.FC<Props> = ({
         {Object.keys(groups).map((commandGroup) => {
           return (
             <div key={commandGroup}>
-              {commandGroup === RESULTS_GROUP ? (
-                <SearchResultsHeader
-                  searchQuery={searchQuery}
-                  source={SearchQuerySource.CommandBar}
-                  onSearchResultClicked={onSearchResultsHeaderClicked}
-                />
-              ) : (
+              {commandGroup !== RESULTS_GROUP && (
                 <div className={styles.groupHeader} id={commandGroup}>
                   {commandGroup}
                 </div>

diff --git a/src/components/Search/SearchBodyContainer.tsx b/src/components/Search/SearchBodyContainer.tsx
@@ -18,7 +18,6 @@ interface Props {
   hasError: boolean;
   searchResult: SearchResponse;
   onSearchKeywordClicked: (keyword: string) => void;
-  onSearchResultClicked?: () => void;
   currentPage?: number;
   pageSize?: number;
   onPageChange?: (page: number) => void;
@@ -32,7 +31,6 @@ const SearchBodyContainer: React.FC<Props> = ({
   hasError,
   searchResult,
   onSearchKeywordClicked,
-  onSearchResultClicked,
   currentPage,
   pageSize,
   onPageChange,
@@ -70,7 +68,6 @@ const SearchBodyContainer: React.FC<Props> = ({
                     />
                   ) : (
                     <SearchResults
-                      onSearchResultClicked={onSearchResultClicked}
                       searchResult={searchResult}
                       searchQuery={searchQuery}
                       source={source}

diff --git a/src/components/Search/SearchInput/SearchInput.module.scss b/src/components/Search/SearchInput/SearchInput.module.scss
@@ -27,6 +27,10 @@
     justify-content: center;
 }
 
+.form {
+    display: contents;
+}
+
 .input {
     border: none !important;
     width: 100%;

diff --git a/src/components/Search/SearchInput/index.tsx b/src/components/Search/SearchInput/index.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
+import { useRouter } from 'next/router';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 
@@ -20,6 +21,7 @@ import {
   stopCommandBarVoiceFlow,
 } from '@/redux/slices/voiceSearch';
 import { logButtonClick } from '@/utils/eventLogger';
+import { getSearchQueryNavigationUrl } from '@/utils/navigation';
 import { isMobile } from '@/utils/responsive';
 
 type Props = {
@@ -35,6 +37,7 @@ const SearchInput: React.FC<Props> = ({
   shouldExpandOnClick = false,
   shouldOpenDrawerOnMobile = false,
 }) => {
+  const router = useRouter();
   const isVoiceSearchFlowStarted = useSelector(selectIsCommandBarVoiceFlowStarted, shallowEqual);
   const [searchQuery, setSearchQuery] = useState<string>(initialSearchQuery || '');
   const isExpanded = useSelector(selectIsExpanded);
@@ -93,36 +96,45 @@ const SearchInput: React.FC<Props> = ({
     }
   };
 
+  const onSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (searchQuery) {
+      router.push(getSearchQueryNavigationUrl(searchQuery));
+    }
+  };
+
   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}
-          onClearClicked={onClearClicked}
-          clearable
-          prefix={<SearchIcon />}
-          prefixSuffixContainerClassName={styles.prefixSuffixContainer}
-          containerClassName={styles.input}
-          htmlType="search"
-          enterKeyHint="search"
-          suffix={
-            <>
-              <KeyboardInput meta keyboardKey="K" />
-              <TarteelVoiceSearchTrigger isCommandBar onClick={onTarteelTriggerClicked} />
-            </>
-          }
-          shouldUseDefaultStyles={false}
-          fixedWidth={false}
-          size={InputSize.Large}
-        />
+        <form onSubmit={onSubmit} className={styles.form}>
+          <Input
+            onClick={onInputClick}
+            id="searchQuery"
+            disabled={isVoiceSearchFlowStarted}
+            onChange={onSearchQueryChange}
+            value={searchQuery}
+            placeholder={placeholder}
+            onClearClicked={onClearClicked}
+            clearable
+            prefix={<SearchIcon />}
+            prefixSuffixContainerClassName={styles.prefixSuffixContainer}
+            containerClassName={styles.input}
+            htmlType="search"
+            enterKeyHint="search"
+            suffix={
+              <>
+                <KeyboardInput meta keyboardKey="K" />
+                <TarteelVoiceSearchTrigger isCommandBar onClick={onTarteelTriggerClicked} />
+              </>
+            }
+            shouldUseDefaultStyles={false}
+            fixedWidth={false}
+            size={InputSize.Large}
+          />
+        </form>
       </div>
       {isExpanded && (
         <div className={styles.dropdownContainer}>

diff --git a/src/components/Search/SearchResults/index.tsx b/src/components/Search/SearchResults/index.tsx
@@ -3,9 +3,9 @@ import React from 'react';
 import useTranslation from 'next-translate/useTranslation';
 
 import SearchResultItem from './SearchResultItem';
-import SearchResultsHeader from './SearchResultsHeader';
 
 import Pagination from '@/dls/Pagination/Pagination';
+import useScrollToTop from '@/hooks/useScrollToTop';
 import SearchQuerySource from '@/types/SearchQuerySource';
 import { toLocalizedNumber } from '@/utils/locale';
 import { SearchResponse } from 'types/ApiResponses';
@@ -16,7 +16,6 @@ interface Props {
   currentPage?: number;
   pageSize?: number;
   onPageChange?: (page: number) => void;
-  onSearchResultClicked?: () => void;
   source: SearchQuerySource;
 }
 
@@ -27,28 +26,24 @@ const SearchResults: React.FC<Props> = ({
   currentPage,
   onPageChange,
   pageSize,
-  onSearchResultClicked,
 }) => {
   const results = searchResult.result.navigation.concat(searchResult.result.verses);
   const isSearchDrawer = source === SearchQuerySource.SearchDrawer;
   const { t, lang } = useTranslation('common');
+  const scrollToTop = useScrollToTop();
+
+  const handlePageChange = (page: number) => {
+    scrollToTop();
+    onPageChange?.(page);
+  };
+
   return (
     <div>
-      {isSearchDrawer ? (
-        <SearchResultsHeader
-          searchQuery={searchQuery}
-          onSearchResultClicked={onSearchResultClicked}
-          source={source}
-        />
-      ) : (
+      {!isSearchDrawer && searchQuery && (
         <>
-          {searchQuery && (
-            <>
-              {t('search-results', {
-                count: toLocalizedNumber(searchResult.pagination.totalRecords, lang),
-              })}
-            </>
-          )}
+          {t('search-results', {
+            count: toLocalizedNumber(searchResult.pagination.totalRecords, lang),
+          })}
         </>
       )}
       <>
@@ -65,7 +60,7 @@ const SearchResults: React.FC<Props> = ({
         <Pagination
           currentPage={currentPage}
           totalCount={searchResult.pagination.totalRecords}
-          onPageChange={onPageChange}
+          onPageChange={handlePageChange}
           pageSize={pageSize}
         />
       )}

diff --git a/src/utils/navigation.ts b/src/utils/navigation.ts
@@ -281,7 +281,7 @@ export const resolveUrlBySearchNavigationType = (
  * @returns {string}
  */
 export const getSearchQueryNavigationUrl = (query?: string): string =>
-  `/search${query ? `?${QueryParam.QUERY}=${query}` : ''}`;
+  `/search${query ? `?${QueryParam.QUERY}=${encodeURIComponent(query)}` : ''}`;
 
 /**
  * Get the href link to the info page of a Surah.