feat(Search): add different search scopes

components/core/Filter/index.js

@@ -10,24 +10,42 @@ import { Provider } from "~/components/core/Filter/Provider";
 import { Sidebar, SidebarTrigger } from "~/components/core/Filter/Sidebar";
 import { Popup, PopupTrigger } from "~/components/core/Filter/Popup";
 import { useSearchStore } from "~/components/core/Search/store";
+import { LoaderSpinner } from "~/components/system/components/Loaders";
 
 /* -------------------------------------------------------------------------------------------------
  *  Title
  * -----------------------------------------------------------------------------------------------*/
 
 function Title({ page, data }) {
-  const { query, isSearching } = useSearchStore();
+  const { query, results, isFetchingResults, isSearching } = useSearchStore();
   let title = React.useMemo(() => {
-    if (isSearching) return `Searching for ${query}`;
+    if (isFetchingResults)
+      return (
+        <div css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
+          <LoaderSpinner style={{ height: 16, width: 16 }} />
+          <System.H5
+            title={title}
+            style={{ maxWidth: 400, marginLeft: 8 }}
+            as="p"
+            nbrOflines={1}
+            color="textBlack"
+          >
+            Searching: {query}
+          </System.H5>
+        </div>
+      );
+    if (results && query) return `Showing results for: "${query}"`;
     if (page.id === "NAV_DATA") return "My library";
     if (page.id === "NAV_SLATE" && data?.slatename) return "# " + data?.slatename;
     if (page.id === "NAV_PROFILE") return "@ " + data.username;
-  }, [page, data, query, isSearching]);
+  }, [page, data, isFetchingResults, isSearching]);
 
-  return (
+  return typeof title === "string" ? (
     <System.H5 title={title} style={{ maxWidth: 400 }} as="p" nbrOflines={1} color="textBlack">
       {title}
     </System.H5>
+  ) : (
+    title
   );
 }
 

components/core/Search/index.js

@@ -1,11 +1,11 @@
 import * as React from "react";
 import * as SVG from "~/common/svg";
 import * as Styles from "~/common/styles";
+import * as System from "~/components/system";
 
 import { css } from "@emotion/react";
 import { Input as InputPrimitive } from "~/components/system/components/Input";
 import { useSearchStore } from "~/components/core/Search/store";
-import { LoaderSpinner } from "~/components/system/components/Loaders";
 import { FileTypeGroup } from "~/components/core/FileTypeIcon";
 import { Link } from "~/components/core/Link";
 
@@ -22,10 +22,10 @@ const STYLES_SEARCH_COMPONENT = (theme) => css`
   background-color: transparent;
   box-shadow: none;
   height: 100%;
+  border-radius: 0px;
   input {
     height: 100%;
     padding: 0px 4px;
-    border-radius: 0px;
   }
   &::placeholder {
     color: ${theme.semantic.textGray};
@@ -59,7 +59,7 @@ const useDebouncedSearch = ({ handleSearch }) => {
 };
 
 function Input({ viewer, data, page, onAction }) {
-  const { search, query, isFetchingResults, setQuery } = useSearchStore();
+  const { search, query, setQuery } = useSearchStore();
 
   const handleSearch = async (query) => {
     // NOTE(amine): update params with search query
@@ -93,7 +93,6 @@ function Input({ viewer, data, page, onAction }) {
 
     //NOTE(amine): searching on another user's profile
     if (page.id === "NAV_PROFILE" && data?.id !== viewer?.id) {
-      console.log(data?.id, page.id, page.id === "NAV_PROFILE", data?.id !== viewer?.id);
       search({
         types: ["SLATE", "FILE"],
         userId: data.id,
@@ -128,7 +127,18 @@ function Input({ viewer, data, page, onAction }) {
   useDebouncedSearch({ handleSearch });
 
   return (
-    <div style={{ position: "relative", width: "100%", height: "100%" }}>
+    <div
+      style={{
+        position: "relative",
+        width: "100%",
+        /**
+         * NOTE(amine): Since this input takes 100% of the parent's height, the top part of the focusRing will be hidden.
+         * To fix this we add a 2px margin-top. (2px is the width of the focusRing)
+         *  */
+        marginTop: "2px",
+        height: "calc(100% - 2px)",
+      }}
+    >
       <InputPrimitive
         full
         containerStyle={{ height: "100%" }}
@@ -139,12 +149,6 @@ function Input({ viewer, data, page, onAction }) {
         value={query}
         onChange={(e) => setQuery(e.target.value)}
       />
-
-      {isFetchingResults && (
-        <div style={{ position: "absolute", right: 0, top: 0 }}>
-          <LoaderSpinner style={{ position: "block", height: 16, width: 16 }} />
-        </div>
-      )}
     </div>
   );
 }
@@ -155,7 +159,6 @@ function Input({ viewer, data, page, onAction }) {
 
 const STYLES_DISMISS_BUTTON = (theme) => css`
   display: block;
-  ${Styles.BUTTON_RESET};
   color: ${theme.semantic.textGray};
 `;
 
@@ -163,9 +166,9 @@ function Dismiss({ css, ...props }) {
   const { clearSearch } = useSearchStore();
 
   return (
-    <button onClick={clearSearch} css={[STYLES_DISMISS_BUTTON, css]} {...props}>
+    <System.ButtonPrimitive onClick={clearSearch} css={[STYLES_DISMISS_BUTTON, css]} {...props}>
       <SVG.Dismiss style={{ display: "block" }} height={16} width={16} />
-    </button>
+    </System.ButtonPrimitive>
   );
 }