= ({
[styles.containerOpen]: isOpen,
[styles.left]: side === DrawerSide.Left,
[styles.right]: side === DrawerSide.Right,
+ [styles.noTransition]: type === DrawerType.Search && navbar.disableSearchDrawerTransition,
})}
ref={drawerRef}
id={type === DrawerType.Settings ? 'settings-drawer-container' : undefined}
diff --git a/src/components/Navbar/NavbarBody/index.tsx b/src/components/Navbar/NavbarBody/index.tsx
index 235ee077f9..9a2dff420d 100644
--- a/src/components/Navbar/NavbarBody/index.tsx
+++ b/src/components/Navbar/NavbarBody/index.tsx
@@ -20,6 +20,7 @@ import {
setIsSearchDrawerOpen,
setIsNavigationDrawerOpen,
setIsSettingsDrawerOpen,
+ setDisableSearchDrawerTransition,
} from '@/redux/slices/navbar';
import { logEvent } from '@/utils/eventLogger';
@@ -44,6 +45,8 @@ const NavbarBody: React.FC = () => {
const openSearchDrawer = () => {
logDrawerOpenEvent('search');
dispatch({ type: setIsSearchDrawerOpen.type, payload: true });
+ // reset the disable transition state
+ dispatch({ type: setDisableSearchDrawerTransition.type, payload: false });
};
const openSettingsDrawer = () => {
diff --git a/src/components/Navbar/SearchDrawer/Footer/Footer.module.scss b/src/components/Navbar/SearchDrawer/Footer/Footer.module.scss
index 4f815dc18b..14eb825583 100644
--- a/src/components/Navbar/SearchDrawer/Footer/Footer.module.scss
+++ b/src/components/Navbar/SearchDrawer/Footer/Footer.module.scss
@@ -1,8 +1,5 @@
.container {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- font-size: var(--font-size-xsmall-dangerous);
+ padding-block-end: var(--spacing-mega);
}
.betaContainer {
diff --git a/src/components/Navbar/SearchDrawer/Footer/index.tsx b/src/components/Navbar/SearchDrawer/Footer/index.tsx
index 0d8750b181..c97a5a8b46 100644
--- a/src/components/Navbar/SearchDrawer/Footer/index.tsx
+++ b/src/components/Navbar/SearchDrawer/Footer/index.tsx
@@ -1,18 +1,26 @@
import React from 'react';
+import { useSelector, shallowEqual } from 'react-redux';
+
import styles from './Footer.module.scss';
import TarteelAttribution from '@/components/TarteelAttribution/TarteelAttribution';
import Separator from '@/dls/Separator/Separator';
+import { selectIsSearchDrawerVoiceFlowStarted } from '@/redux/slices/voiceSearch';
const Footer: React.FC = () => {
+ const isVoiceSearchFlowStarted = useSelector(selectIsSearchDrawerVoiceFlowStarted, shallowEqual);
return (
-
+ <>
+ {isVoiceSearchFlowStarted ? (
+
+
+
+
+ ) : (
+
+ )}
+
);
};
diff --git a/src/components/Navbar/SearchDrawer/SearchDrawer.tsx b/src/components/Navbar/SearchDrawer/SearchDrawer.tsx
index 196f628d08..836768ebdb 100644
--- a/src/components/Navbar/SearchDrawer/SearchDrawer.tsx
+++ b/src/components/Navbar/SearchDrawer/SearchDrawer.tsx
@@ -8,6 +8,7 @@ import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import SearchDrawerHeader from './Header';
+import { getNewSearchResults } from '@/api';
import Drawer, { DrawerType } from '@/components/Navbar/Drawer';
import Spinner from '@/dls/Spinner/Spinner';
import useDebounce from '@/hooks/useDebounce';
@@ -15,10 +16,11 @@ import useFocus from '@/hooks/useFocusElement';
import { selectNavbar } from '@/redux/slices/navbar';
import { selectSelectedTranslations } from '@/redux/slices/QuranReader/translations';
import { selectIsSearchDrawerVoiceFlowStarted } from '@/redux/slices/voiceSearch';
+import SearchService from '@/types/Search/SearchService';
import SearchQuerySource from '@/types/SearchQuerySource';
import { areArraysEqual } from '@/utils/array';
-import { logButtonClick } from '@/utils/eventLogger';
-import { addToSearchHistory, searchGetResults } from '@/utils/search';
+import { logButtonClick, logTextSearchQuery } from '@/utils/eventLogger';
+import { addToSearchHistory, getQuickSearchQuery } from '@/utils/search';
import { SearchResponse } from 'types/ApiResponses';
const SearchBodyContainer = dynamic(() => import('@/components/Search/SearchBodyContainer'), {
@@ -33,8 +35,6 @@ const VoiceSearchBodyContainer = dynamic(
},
);
-const FIRST_PAGE_NUMBER = 1;
-const PAGE_SIZE = 10;
const DEBOUNCING_PERIOD_MS = 1000;
const SearchDrawer: React.FC = () => {
@@ -60,17 +60,21 @@ const SearchDrawer: React.FC = () => {
// only when the search query has a value we call the API.
if (debouncedSearchQuery) {
addToSearchHistory(dispatch, debouncedSearchQuery, SearchQuerySource.SearchDrawer);
- searchGetResults(
- SearchQuerySource.SearchDrawer,
- debouncedSearchQuery,
- FIRST_PAGE_NUMBER,
- PAGE_SIZE,
- setIsSearching,
- setHasError,
- setSearchResult,
- null,
- selectedTranslations?.length && selectedTranslations.join(','),
- );
+ setIsSearching(true);
+ logTextSearchQuery(debouncedSearchQuery, SearchQuerySource.SearchDrawer);
+ getNewSearchResults(getQuickSearchQuery(debouncedSearchQuery))
+ .then((response) => {
+ setSearchResult({
+ ...response,
+ service: SearchService.KALIMAT,
+ });
+ })
+ .catch(() => {
+ setHasError(true);
+ })
+ .finally(() => {
+ setIsSearching(false);
+ });
}
}, [debouncedSearchQuery, selectedTranslations, dispatch]);
@@ -140,6 +144,8 @@ const SearchDrawer: React.FC = () => {
searchResult={searchResult}
isSearching={isSearching}
hasError={hasError}
+ shouldSuggestFullSearchWhenNoResults
+ source={SearchQuerySource.SearchDrawer}
/>
)}
diff --git a/src/components/CommandBar/CommandsList/CommandControl.tsx b/src/components/Search/CommandBar/CommandsList/CommandControl.tsx
similarity index 88%
rename from src/components/CommandBar/CommandsList/CommandControl.tsx
rename to src/components/Search/CommandBar/CommandsList/CommandControl.tsx
index a429726a0c..7d70e6bd39 100644
--- a/src/components/CommandBar/CommandsList/CommandControl.tsx
+++ b/src/components/Search/CommandBar/CommandsList/CommandControl.tsx
@@ -2,7 +2,6 @@ import React, { MouseEvent } from 'react';
import Button, { ButtonSize, ButtonVariant } from '@/dls/Button/Button';
import CloseIcon from '@/icons/close.svg';
-// import KeyboardInput from '@/dls/KeyboardInput';
interface Props {
isClearable: boolean;
@@ -29,7 +28,6 @@ const CommandControl: React.FC
= ({
);
}
if (isSelected) {
- // return ;
return null;
}
return null;
diff --git a/src/components/CommandBar/CommandsList/CommandList.module.scss b/src/components/Search/CommandBar/CommandsList/CommandList.module.scss
similarity index 81%
rename from src/components/CommandBar/CommandsList/CommandList.module.scss
rename to src/components/Search/CommandBar/CommandsList/CommandList.module.scss
index 80a2a81327..9f7197020c 100644
--- a/src/components/CommandBar/CommandsList/CommandList.module.scss
+++ b/src/components/Search/CommandBar/CommandsList/CommandList.module.scss
@@ -1,6 +1,6 @@
@use "src/styles/breakpoints";
-$itemHeight: calc(1.5 * var(--spacing-mega));
+$itemHeight: calc(1.2 * var(--spacing-mega));
.noResult {
text-align: center;
font-size: var(--font-size-large);
@@ -24,25 +24,23 @@ $itemHeight: calc(1.5 * var(--spacing-mega));
display: flex;
align-items: center;
justify-content: space-between;
- height: $itemHeight;
font-size: var(--font-size-normal);
- padding-block-start: 0;
- padding-block-end: 0;
+ padding-block-start: var(--spacing-xxsmall);
+ padding-block-end: var(--spacing-xxsmall);
padding-inline-start: var(--spacing-xsmall);
padding-inline-end: var(--spacing-xsmall);
cursor: pointer;
- color: var(--color-text-faded);
- white-space: nowrap;
position: relative;
z-index: var(--z-index-default);
&.selected {
- color: var(--color-text-default);
+ background: var(--color-background-alternative-medium);
+ border-radius: var(--border-radius-rounded);
}
}
.highlight {
transition: transform var(--transition-fast);
- height: $itemHeight;
+ // min-height: $itemHeight;
width: 100%;
position: absolute;
border-radius: var(--border-radius-rounded);
diff --git a/src/components/Search/CommandBar/CommandsList/CommandPrefix/CommandPrefix.module.scss b/src/components/Search/CommandBar/CommandsList/CommandPrefix/CommandPrefix.module.scss
new file mode 100644
index 0000000000..89584dca90
--- /dev/null
+++ b/src/components/Search/CommandBar/CommandsList/CommandPrefix/CommandPrefix.module.scss
@@ -0,0 +1,25 @@
+.commandPrefix {
+ margin-inline-end: var(--spacing-small);
+ margin-block-start: var(--spacing-micro);
+ display: flex;
+ align-items: center;
+ > svg {
+ width: var(--spacing-medium);
+ height: var(--spacing-medium);
+ }
+}
+
+.container {
+ display: flex;
+ align-items: flex-start;
+}
+
+.name {
+ em {
+ font-weight: var(--font-weight-bold);
+ color: var(--color-highlight-dark);
+ }
+ sup {
+ display: none;
+ }
+}
diff --git a/src/components/Search/CommandBar/CommandsList/CommandPrefix/index.tsx b/src/components/Search/CommandBar/CommandsList/CommandPrefix/index.tsx
new file mode 100644
index 0000000000..39d43c2e5b
--- /dev/null
+++ b/src/components/Search/CommandBar/CommandsList/CommandPrefix/index.tsx
@@ -0,0 +1,49 @@
+/* eslint-disable react/no-danger */
+import React from 'react';
+
+import useTranslation from 'next-translate/useTranslation';
+
+import styles from './CommandPrefix.module.scss';
+
+import SearchResultItemIcon from '@/components/Search/SearchResults/SearchResultItemIcon';
+import { Direction } from '@/utils/locale';
+import { SearchNavigationType } from 'types/Search/SearchNavigationResult';
+
+interface Props {
+ name: string;
+ type: SearchNavigationType;
+ isVoiceSearch: boolean;
+}
+
+const CommandPrefix: React.FC = ({ name, type, isVoiceSearch }) => {
+ const { t } = useTranslation('common');
+ const getContent = () => {
+ if (type === SearchNavigationType.SEARCH_PAGE) {
+ return t('search-for', {
+ searchQuery: name,
+ });
+ }
+
+ return name;
+ };
+
+ return (
+
+
+
+
+ {isVoiceSearch ? (
+
{name}
+ ) : (
+
+ )}
+
{t('command-bar.no-nav-results')}
;
}
return (