feat(search): add option for search view

- select between `card` or `list` as current search view

src/components/SearchPopover/index.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import {
+  IonPopover,
+  IonButton,
+  IonIcon,
+  IonLabel,
+  IonItem,
+  IonList,
+  IonListHeader,
+  IonRadio,
+  IonRadioGroup,
+} from '@ionic/react';
+import { ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons';
+import { useDispatch, useSelector } from 'react-redux';
+import { setCurrentSearchView } from '../../data/user/user.slice';
+import { RootState } from '../../store';
+import { selectCurrentSearchView } from '../../data/user/user.selector';
+
+export const SearchPopover: React.FC = () => {
+  const [popoverState, setShowPopover] = useState({
+    showPopover: false,
+    event: undefined,
+  });
+
+  const dispatch = useDispatch();
+  const currentSearchView = useSelector((state: RootState) =>
+    selectCurrentSearchView(state),
+  );
+
+  return (
+    <>
+      <IonPopover
+        cssClass="my-custom-class"
+        event={popoverState.event}
+        isOpen={popoverState.showPopover}
+        onDidDismiss={() =>
+          setShowPopover({ showPopover: false, event: undefined })
+        }
+      >
+        <IonList className={'active'}>
+          <IonRadioGroup
+            value={currentSearchView}
+            onIonChange={(e) =>
+              dispatch(
+                setCurrentSearchView({ currentSearchView: e.detail.value }),
+              )
+            }
+          >
+            <IonListHeader>
+              <IonLabel>View</IonLabel>
+            </IonListHeader>
+            <IonItem>
+              <IonLabel>Card</IonLabel>
+              <IonRadio slot="start" value="card" />
+            </IonItem>
+            <IonItem lines="none">
+              <IonLabel>List</IonLabel>
+              <IonRadio slot="start" value="list" />
+            </IonItem>
+          </IonRadioGroup>
+        </IonList>
+      </IonPopover>
+      <IonButton
+        onClick={(event: any) => {
+          event.persist();
+          setShowPopover({ showPopover: true, event });
+        }}
+      >
+        <IonIcon
+          slot="icon-only"
+          ios={ellipsisHorizontal}
+          md={ellipsisVertical}
+        />
+      </IonButton>
+    </>
+  );
+};

src/components/SearchResults/index.tsx

@@ -0,0 +1,54 @@
+import { IonNote, IonRouterLink } from '@ionic/react';
+import React from 'react';
+import { Chapter, getChapterIdsByUrl } from '../Chapters';
+import { LunrResult } from '../../utils/lunr';
+
+interface ContainerProps {
+  results: LunrResult[];
+}
+
+export const SearchResults: React.FC<ContainerProps> = (props) => {
+  const { results } = props;
+
+  if (results.length === 0) {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100%',
+        }}
+      >
+        <IonNote>No results found</IonNote>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <IonNote>Found {results.length} results</IonNote>
+      <div
+        style={{
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        {results.map((result, resultIndex) => {
+          const { id: chapterUrl } = result;
+          const { id, subId } = getChapterIdsByUrl(chapterUrl);
+          return (
+            <IonRouterLink
+              key={resultIndex}
+              routerLink={chapterUrl}
+              routerDirection="forward"
+            >
+              <Chapter id={id} isCard subId={subId} />
+            </IonRouterLink>
+          );
+        })}
+      </div>
+    </>
+  );
+};

src/pages/Search/index.tsx

@@ -5,14 +5,14 @@ import {
   IonHeader,
   IonMenuButton,
   IonPage,
-  IonRouterLink,
   IonSearchbar,
   IonTitle,
   IonToolbar,
 } from '@ionic/react';
 import { useTranslation } from 'react-i18next';
+import { SearchPopover } from '../../components/SearchPopover';
+import { SearchResults } from '../../components/SearchResults';
 import { useLunr } from '../../utils/lunr';
-import { Chapter, getChapterIdsByUrl } from '../../components/Chapters';
 
 interface ContainerProps {}
 
@@ -25,39 +25,23 @@ export const SearchPage: React.FC<ContainerProps> = (props) => {
   return (
     <IonPage>
       <IonHeader>
-        <IonToolbar color="primary" style={{ '--opacity': 1 }}>
+        <IonToolbar color="primary">
           <IonButtons slot="start">
             <IonMenuButton />
           </IonButtons>
           <IonTitle>{t('SEARCH.TITLE')}</IonTitle>
+          <IonButtons slot="primary">
+            <SearchPopover />
+          </IonButtons>
         </IonToolbar>
       </IonHeader>
 
-      <IonContent fullscreen={true}>
-        <IonHeader collapse="condense">
-          <IonToolbar color="primary" style={{ '--opacity': 1 }}>
-            <IonTitle size="large">{t('SEARCH.TITLE')}</IonTitle>
-          </IonToolbar>
-        </IonHeader>
+      <IonContent>
         <IonSearchbar
           value={searchValue}
           onIonChange={(event) => setSearchValue(event.detail.value!)}
         ></IonSearchbar>
-        <div style={{ margin: 'auto', width: 'fit-content' }}>
-          {results.map((result, resultIndex) => {
-            const chapterUrl = result.id;
-            const { id, subId } = getChapterIdsByUrl(chapterUrl);
-            return (
-              <IonRouterLink
-                key={resultIndex}
-                routerLink={chapterUrl}
-                routerDirection="forward"
-              >
-                <Chapter id={id} isCard subId={subId} />
-              </IonRouterLink>
-            );
-          })}
-        </div>
+        <SearchResults results={results} />
       </IonContent>
     </IonPage>
   );

src/utils/lunr.tsx

@@ -12,6 +12,12 @@ type LunrDocs = {
   };
 };
 
+export type LunrResult = {
+  id: string;
+  title: string;
+  body: string;
+};
+
 const createLunrDocs = () => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const { t } = useTranslation();