feat: add search modal mobile

src/components/ButtonLink.tsx

@@ -6,18 +6,22 @@ export default function ButtonLink({
   onClick,
   children,
   style = {},
+  className = "",
 }: {
   href?: string;
   onClick?: (...args: any) => any;
   children: ReactNode;
   style?: CSSProperties;
+  className?: string;
 }) {
   const handleClick = (event) => {
-    event.preventDefault();
+    if (!href || href === "#") {
+      event.preventDefault();
+    }
     onClick && onClick();
   };
   return (
-    <Link href={href} onClick={handleClick} style={style}>
+    <Link href={href} onClick={handleClick} style={style} className={className}>
       {children}
     </Link>
   );

src/components/Links/Links.tsx

@@ -9,6 +9,7 @@ import LinkItem from "./LinkItem";
 
 import ButtonLink from "components/ButtonLink";
 import CreateItem from "components/QuickActions/CreateItem";
+import QuickActionSearch from "components/QuickActions/Search";
 import { RxHamburgerMenu } from "react-icons/rx";
 import styles from "./links.module.scss";
 
@@ -17,11 +18,13 @@ export default function Links({
   toggleFavorite,
   isMobile,
   openMobileModal,
+  openSearchModal,
 }: {
   category: Category;
   toggleFavorite: (linkId: Link["id"]) => void;
   isMobile: boolean;
   openMobileModal: () => void;
+  openSearchModal: () => void;
 }) {
   if (category === null) {
     return (
@@ -56,6 +59,7 @@ export default function Links({
           )}
         </span>
         <span className={styles["category-controls"]}>
+          <QuickActionSearch openSearchModal={openSearchModal} />
           <CreateItem type="link" categoryId={category.id} />
           <EditItem type="category" id={id} />
           <RemoveItem type="category" id={id} />

src/components/Modal/modal.module.scss

@@ -48,10 +48,12 @@
   flex: 1;
   align-items: center;
   flex-direction: column;
+  overflow: auto;
 }
 
 @media (max-width: 768px) {
   .modal-container {
+    height: calc(100% - 2em);
     width: calc(100% - 2em);
     min-width: unset;
     margin-top: 1em;

src/components/QuickActions/CreateItem.tsx

@@ -1,5 +1,5 @@
 import LinkTag from "next/link";
-import { GrAdd } from "react-icons/gr";
+import { IoAddOutline } from "react-icons/io5";
 
 import { Category } from "types";
 
@@ -11,7 +11,7 @@ export default function CreateItem({
   onClick,
 }: {
   type: "category" | "link";
-  categoryId: Category["id"];
+  categoryId?: Category["id"];
   onClick?: (event: any) => void; // FIXME: find good event type
 }) {
   return (
@@ -21,7 +21,7 @@ export default function CreateItem({
       className={styles["action"]}
       onClick={onClick && onClick}
     >
-      <GrAdd />
+      <IoAddOutline />
     </LinkTag>
   );
 }

src/components/QuickActions/Search.tsx

@@ -0,0 +1,16 @@
+import ButtonLink from "components/ButtonLink";
+import { BsSearch } from "react-icons/bs";
+
+import styles from "./quickactions.module.scss";
+
+export default function QuickActionSearch({
+  openSearchModal,
+}: {
+  openSearchModal: () => void;
+}) {
+  return (
+    <ButtonLink className={styles["action"]} onClick={openSearchModal}>
+      <BsSearch />
+    </ButtonLink>
+  );
+}

src/components/SearchModal/SearchModal.tsx

@@ -19,11 +19,13 @@ export default function SearchModal({
   handleSelectCategory,
   categories,
   items,
+  noHeader = true,
 }: {
   close: () => void;
   handleSelectCategory: (category: Category) => void;
   categories: Category[];
   items: SearchItem[];
+  noHeader?: boolean;
 }) {
   const autoFocusRef = useAutoFocus();
 
@@ -98,7 +100,7 @@ export default function SearchModal({
   );
 
   return (
-    <Modal title="Rechercher" close={close} noHeader padding={"0"}>
+    <Modal close={close} noHeader={noHeader} padding={"0"}>
       <form onSubmit={handleSubmit} className={styles["search-form"]}>
         <div className={styles["search-input-wrapper"]}>
           <label htmlFor="search">

src/pages/index.tsx

@@ -4,6 +4,7 @@ import { useCallback, useMemo, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 
 import BlockWrapper from "components/BlockWrapper/BlockWrapper";
+import ButtonLink from "components/ButtonLink";
 import Links from "components/Links/Links";
 import Modal from "components/Modal/Modal";
 import PageTransition from "components/PageTransition";
@@ -144,6 +145,9 @@ function Home(props: HomePageProps) {
           {mobileModal.isShowing && (
             <Modal close={mobileModal.close}>
               <BlockWrapper style={{ minHeight: "0", flex: "1" }}>
+                <ButtonLink href={PATHS.CATEGORY.CREATE}>
+                  Créer categorie
+                </ButtonLink>
                 <Categories
                   categories={categories}
                   categoryActive={categoryActive}
@@ -168,6 +172,7 @@ function Home(props: HomePageProps) {
         toggleFavorite={toggleFavorite}
         isMobile={isMobile}
         openMobileModal={mobileModal.open}
+        openSearchModal={searchModal.open}
       />
       <AnimatePresence>
         {searchModal.isShowing && (
@@ -176,6 +181,7 @@ function Home(props: HomePageProps) {
             categories={categories}
             items={itemsSearch}
             handleSelectCategory={handleSelectCategory}
+            noHeader={!isMobile}
           />
         )}
       </AnimatePresence>