updates

locales/en/common.json

@@ -253,6 +253,7 @@
   "pagination-summary": "{{currentResultNumber}}-{{endOfResultNumber}} of {{totalNumberOfResults}} search results",
   "pbuh": "Blessings of Allah be upon him",
   "popular-links": "Popular Links",
+  "search-results-no-count": "Search Results",
   "popup": {
     "footnote": "Monthly donations allow us to focus less on fundraising",
     "text-1": "We are committed to serving the world Quranic knowledge and technology, always for free.",
@@ -303,7 +304,8 @@
     "results": "results",
     "show-all": "Show all results",
     "switch-mode": "Switch to Advanced Search",
-    "title": "Search"
+    "title": "Search",
+    "more-results": "More results"
   },
   "seconds": "Seconds",
   "see-new": "See What's New",

src/components/CommandBar/CommandBarBase/CommandBarBase.module.scss

@@ -32,18 +32,21 @@ $min-height: calc(9 * var(--spacing-mega));
   }
 }
 
+$start-offset: 25%;
+$end-offset: 50%;
+
 .content {
-  --content-translate-position: translate(-50%, -50%);
+  --content-translate-position: translate(-#{$end-offset}, -#{$start-offset});
   [dir="rtl"] & {
-    --content-translate-position: translate(50%, -50%);
+    --content-translate-position: translate(#{$end-offset}, -#{$start-offset});
   }
 
   background-color: var(--color-background-default);
-  border-radius: var(--border-radius-rounded);
+  border-radius: var(--border-radius-circle-small);
   box-shadow: $shadow;
   position: fixed;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
+  inset-block-start: $start-offset;
+  inset-inline-start: #{$end-offset};
   transform: var(--content-translate-position);
   width: $width;
   max-width: $max-width;
@@ -65,45 +68,8 @@ $min-height: calc(9 * var(--spacing-mega));
   z-index: var(--z-index-modal);
 }
 
-@keyframes overlayShow {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes overlayHide {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
 .overlay {
-  @include theme.light {
-    background-color: $overlay-background-light;
-  }
-  @include theme.dark {
-    background-color: $overlay-background-dark;
-  }
-  @include theme.sepia {
-    background-color: $overlay-background-sepia;
-  }
-  backdrop-filter: blur(6px);
   position: fixed;
   inset: 0;
-
-  @media (prefers-reduced-motion: no-preference) {
-    &[data-state="open"] {
-      animation: overlayShow var(--transition-fast) ease;
-    }
-    &[data-state="closed"] {
-      animation: overlayHide var(--transition-fast) ease;
-    }
-  }
   z-index: var(--z-index-overlay);
 }

src/components/CommandBar/CommandBarBody/CommandBarBody.module.scss

@@ -3,7 +3,12 @@ $height: calc(9 * var(--spacing-mega));
 
 .container {
   padding: 0 var(--spacing-large);
+  @include breakpoints.smallerThanTablet {
+    padding: 0 var(--spacing-xxsmall);
+  }
+  background: var(--color-background-elevated);
   box-sizing: border-box;
+  border-radius: var(--border-radius-circle-small);
 }
 
 .textInputContainer {
@@ -23,7 +28,6 @@ $height: calc(9 * var(--spacing-mega));
 
 .inputContainer {
   border-block-end: 1px solid var(--color-borders-hairline);
-  padding-block: var(--spacing-small);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -46,7 +50,7 @@ $height: calc(9 * var(--spacing-mega));
     font-size: var(--font-size-xlarge);
   }
   padding: var(--spacing-small) 0;
-  color: var(--color-text-faded);
+  color: var(--color-text-default);
   &::placeholder {
     color: var(--color-text-faded);
     opacity: var(--opacity-50);
@@ -59,14 +63,9 @@ $height: calc(9 * var(--spacing-mega));
     padding-block-end: var(--spacing-xsmall);
   }
   padding-inline-start: 0;
-  padding-inline-end: 0;
+  padding-inline-end: var(--spacing-xxsmall);
   overflow-y: auto;
   position: relative;
   height: $height;
   box-sizing: border-box;
 }
-
-.attribution {
-  display: flex;
-  justify-content: flex-end;
-}

src/components/CommandBar/CommandBarBody/index.tsx

@@ -1,21 +1,19 @@
 /* eslint-disable max-lines */
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback } from 'react';
 
 import classNames from 'classnames';
 import groupBy from 'lodash/groupBy';
 import useTranslation from 'next-translate/useTranslation';
 import { shallowEqual, useSelector } from 'react-redux';
 
-import CommandsList, { Command } from '../CommandsList';
+import CommandsList, { Command, RESULTS_GROUP } from '../CommandsList';
 
 import styles from './CommandBarBody.module.scss';
 
 import { getNewSearchResults } from '@/api';
 import DataFetcher from '@/components/DataFetcher';
-import TarteelAttribution from '@/components/TarteelAttribution/TarteelAttribution';
 import VoiceSearchBodyContainer from '@/components/TarteelVoiceSearch/BodyContainer';
 import TarteelVoiceSearchTrigger from '@/components/TarteelVoiceSearch/Trigger';
-import useDebounce from '@/hooks/useDebounce';
 import IconSearch from '@/icons/search.svg';
 import { selectInitialSearchQuery, selectRecentNavigations } from '@/redux/slices/CommandBar/state';
 import { selectIsCommandBarVoiceFlowStarted } from '@/redux/slices/voiceSearch';
@@ -63,8 +61,6 @@ const NAVIGATE_TO = [
   },
 ];
 
-const DEBOUNCING_PERIOD_MS = 1500;
-
 const CommandBarBody: React.FC = () => {
   const { t } = useTranslation('common');
   const recentNavigations = useSelector(
@@ -74,15 +70,6 @@ const CommandBarBody: React.FC = () => {
   const isVoiceSearchFlowStarted = useSelector(selectIsCommandBarVoiceFlowStarted, shallowEqual);
   const initialSearchQuery = useSelector(selectInitialSearchQuery, shallowEqual);
   const [searchQuery, setSearchQuery] = useState<string>(initialSearchQuery || null);
-  // Debounce search query to avoid having to call the API on every type. The API will be called once the user stops typing.
-  const debouncedSearchQuery = useDebounce<string>(searchQuery, DEBOUNCING_PERIOD_MS);
-
-  useEffect(() => {
-    // only when the search query has a value we call the API.
-    if (debouncedSearchQuery) {
-      logTextSearchQuery(debouncedSearchQuery, SearchQuerySource.CommandBar);
-    }
-  }, [debouncedSearchQuery]);
 
   /**
    * Handle when the search query is changed.
@@ -91,7 +78,11 @@ const CommandBarBody: React.FC = () => {
    * @returns {void}
    */
   const onSearchQueryChange = useCallback((event: React.FormEvent<HTMLInputElement>): void => {
-    setSearchQuery(event.currentTarget.value || null);
+    const newSearchQuery = event.currentTarget.value;
+    if (newSearchQuery) {
+      logTextSearchQuery(newSearchQuery, SearchQuerySource.CommandBar);
+    }
+    setSearchQuery(newSearchQuery || null);
   }, []);
 
   /**
@@ -145,23 +136,29 @@ const CommandBarBody: React.FC = () => {
       if (!data) {
         toBeGroupedCommands = getPreInputCommands();
         numberOfCommands = recentNavigations.length + NAVIGATE_TO.length;
-      } else {
+      } else if (data.result.navigation.length) {
         toBeGroupedCommands = [
           ...data.result.navigation.map((navigationItem) => ({
             ...navigationItem,
-            group: t('command-bar.navigations'),
+            group: RESULTS_GROUP,
           })),
+        ];
+        numberOfCommands = data.result.navigation.length;
+      } else {
+        // if there are no results, we will show the search page suggestion as an item
+        toBeGroupedCommands = [
           {
             key: searchQuery,
             resultType: SearchNavigationType.SEARCH_PAGE,
             name: searchQuery,
             group: t('search.title'),
           },
         ];
-        numberOfCommands = data.result.navigation.length + 1;
+        numberOfCommands = 1;
       }
       return (
         <CommandsList
+          searchQuery={searchQuery}
           commandGroups={{
             groups: groupBy(
               toBeGroupedCommands.map((item, index) => ({ ...item, index })), // append the index so that it can be used for keyboard navigation.
@@ -220,9 +217,6 @@ const CommandBarBody: React.FC = () => {
           />
         )}
       </div>
-      <div className={styles.attribution}>
-        <TarteelAttribution isCommandBar />
-      </div>
     </div>
   );
 };

src/components/CommandBar/CommandBarTrigger/CommandBarTrigger.module.scss

@@ -8,8 +8,7 @@ $width: calc(11 * var(--spacing-mega));
   align-items: center;
 
   > svg {
-    fill: var(--color-text-faded);
-    opacity: var(--opacity-50);
+    fill: var(--color-text-default);
     width: calc(1.4 * var(--spacing-medium));
   }
 
@@ -25,25 +24,22 @@ $width: calc(11 * var(--spacing-mega));
     top var(--transition-fast) ease;
   box-sizing: border-box;
 
-  background: var(--color-background-elevated);
+  background-color: var(--color-success-faded);
 
   width: 100%;
   display: flex;
   align-items: center;
   padding: 0 calc(1.5 * var(--spacing-medium));
-  color: var(--color-text-faded);
+  color: var(--color-text-default);
   min-height: calc(3 * var(--spacing-large));
   border-radius: var(--border-radius-pill);
   cursor: pointer;
   outline: inherit;
   font-size: var(--font-size-large);
   inset-block-start: 0;
-  @include theme.light {
-    box-shadow: var(--shadow-small);
-    &:hover {
-      color: var(--color-text-default);
-      box-shadow: var(--shadow-large);
-    }
+  box-shadow: var(--shadow-strong);
+  &:hover {
+    color: var(--color-text-link);
   }
   justify-content: space-between;
 }

src/components/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<Props> = ({
     );
   }
   if (isSelected) {
-    // return <KeyboardInput keyboardKey="Enter" />;
     return null;
   }
   return null;

src/components/CommandBar/CommandsList/CommandList.module.scss

@@ -1,6 +1,6 @@
 @use "src/styles/breakpoints";
 
-$itemHeight: calc(1.5 * var(--spacing-mega));
+$itemHeight: calc(1.4 * var(--spacing-mega));
 .noResult {
   text-align: center;
   font-size: var(--font-size-large);
@@ -31,12 +31,12 @@ $itemHeight: calc(1.5 * var(--spacing-mega));
   padding-inline-start: var(--spacing-xsmall);
   padding-inline-end: var(--spacing-xsmall);
   cursor: pointer;
-  color: var(--color-text-faded);
   position: relative;
   z-index: var(--z-index-default);
   &.selected {
     color: var(--color-text-default);
-    background: var(--color-background-alternative-faint);
+    background: var(--color-background-alternative-medium);
+    border-radius: var(--border-radius-rounded);
   }
 }
 

src/components/CommandBar/CommandsList/CommandPrefix/CommandPrefix.module.scss

@@ -17,6 +17,9 @@
 .name {
   em {
     font-weight: var(--font-weight-bold);
-    text-decoration: underline;
+    color: var(--color-highlight-dark);
+  }
+  sup {
+    display: none;
   }
 }