feat: Trigger cmd+k from sidebar (#3149)

* feat: Trigger cmd+k from sidebar

* Add hint when opening command bar from sidebar

app/components/Sidebar/Main.tsx

@@ -1,3 +1,4 @@
+import { useKBar } from "kbar";
 import { observer } from "mobx-react";
 import {
   EditIcon,
@@ -10,6 +11,7 @@ import * as React from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { useTranslation } from "react-i18next";
+import { useHistory, useLocation } from "react-router-dom";
 import styled from "styled-components";
 import Bubble from "~/components/Bubble";
 import Flex from "~/components/Flex";
@@ -21,10 +23,10 @@ import useStores from "~/hooks/useStores";
 import AccountMenu from "~/menus/AccountMenu";
 import {
   homePath,
-  searchUrl,
   draftsPath,
   templatesPath,
   settingsPath,
+  searchPath,
 } from "~/utils/routeHelpers";
 import Sidebar from "./Sidebar";
 import ArchiveLink from "./components/ArchiveLink";
@@ -38,9 +40,12 @@ import TrashLink from "./components/TrashLink";
 
 function MainSidebar() {
   const { t } = useTranslation();
-  const { policies, documents } = useStores();
+  const { ui, policies, documents } = useStores();
   const team = useCurrentTeam();
   const user = useCurrentUser();
+  const { query } = useKBar();
+  const location = useLocation();
+  const history = useHistory();
 
   React.useEffect(() => {
     documents.fetchDrafts();
@@ -57,6 +62,16 @@ function MainSidebar() {
   );
   const can = policies.abilities(team.id);
 
+  const handleSearch = React.useCallback(() => {
+    const isSearching = location.pathname.startsWith(searchPath());
+    if (isSearching) {
+      history.push(searchPath());
+    } else {
+      ui.enableModKHint();
+      query.toggle();
+    }
+  }, [ui, location, history, query]);
+
   return (
     <Sidebar ref={handleSidebarRef}>
       {dndArea && (
@@ -81,12 +96,7 @@ function MainSidebar() {
                 label={t("Home")}
               />
               <SidebarLink
-                to={{
-                  pathname: searchUrl(),
-                  state: {
-                    fromMenu: true,
-                  },
-                }}
+                onClick={handleSearch}
                 icon={<SearchIcon color="currentColor" />}
                 label={t("Search")}
                 exact={false}