web: show "no results found" error

apps/web/src/components/placeholders/index.tsx

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { Button, Flex, Text } from "@theme-ui/components";
 import { TipContext, useTip } from "../../hooks/use-tip";
-import { Info, Sync } from "../icons";
+import { Error, Info, Sync } from "../icons";
 import { useStore as useAppStore } from "../../stores/app-store";
 import { strings } from "@notesnook/intl";
 
@@ -78,19 +78,23 @@ function Placeholder(props: PlaceholderProps) {
           px: 6
         }}
       >
-        <Flex
-          sx={{
-            border: "1px solid var(--accent)",
-            borderRadius: 50,
-            p: 1,
-            py: "1.5px"
-          }}
-        >
-          <Info color="accent" size={13} sx={{ mr: "small" }} />
-          <Text variant="subBody" sx={{ fontSize: 10 }} color="accent">
-            {strings.tip()}
-          </Text>
-        </Flex>
+        {tip.type === "error" ? (
+          <Error color="accent-error" size={13} />
+        ) : (
+          <Flex
+            sx={{
+              border: "1px solid var(--accent)",
+              borderRadius: 50,
+              p: 1,
+              py: "1.5px"
+            }}
+          >
+            <Info color="accent" size={13} sx={{ mr: "small" }} />
+            <Text variant="subBody" sx={{ fontSize: 10 }} color="accent">
+              {strings.tip()}
+            </Text>
+          </Flex>
+        )}
         <Text variant="subBody" sx={{ fontSize: "body", mt: 1 }}>
           {text || tip.text}
         </Text>

apps/web/src/hooks/use-tip.ts

@@ -55,6 +55,7 @@ export type Tip = {
   text: string;
   contexts: TipContext[];
   button?: TipButton;
+  type?: "info" | "warning" | "error";
 };
 
 const destructiveContexts: string[] = [];
@@ -110,8 +111,9 @@ export const useTip = (
 
 const tips: Tip[] = [
   {
-    text: `Wrap a query in double quotes to search for an exact match.`,
-    contexts: ["search"]
+    text: `No results found. Try searching with different keywords or check your spelling.`,
+    contexts: ["search"],
+    type: "error"
   },
   {
     text: "Hold Ctrl/Cmd & click on multiple items to select them.",