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

* feat: Trigger cmd+k from sidebar

* Add hint when opening command bar from sidebar

app/components/CommandBar.tsx

@@ -1,24 +1,24 @@
 import { useKBar, KBarPositioner, KBarAnimator, KBarSearch } from "kbar";
 import { observer } from "mobx-react";
+import { QuestionMarkIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Portal } from "react-portal";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import CommandBarResults from "~/components/CommandBarResults";
+import SearchActions from "~/components/SearchActions";
 import rootActions from "~/actions/root";
 import useCommandBarActions from "~/hooks/useCommandBarActions";
+import useStores from "~/hooks/useStores";
 import { CommandBarAction } from "~/types";
-
-export const CommandBarOptions = {
-  animations: {
-    enterMs: 250,
-    exitMs: 200,
-  },
-};
+import { metaDisplay } from "~/utils/keyboard";
+import Text from "./Text";
 
 function CommandBar() {
   const { t } = useTranslation();
+  const { ui } = useStores();
+
   useCommandBarActions(rootActions);
 
   const { rootAction } = useKBar((state) => ({
@@ -30,20 +30,34 @@ function CommandBar() {
   }));
 
   return (
-    <KBarPortal>
-      <Positioner>
-        <Animator>
-          <SearchInput
-            placeholder={`${
-              rootAction?.placeholder ||
-              rootAction?.name ||
-              t("Type a command or search")
-            }…`}
-          />
-          <CommandBarResults />
-        </Animator>
-      </Positioner>
-    </KBarPortal>
+    <>
+      <SearchActions />
+      <KBarPortal>
+        <Positioner>
+          <Animator>
+            <SearchInput
+              placeholder={`${
+                rootAction?.placeholder ||
+                rootAction?.name ||
+                t("Type a command or search")
+              }…`}
+            />
+            <CommandBarResults />
+            {ui.showModKHint && (
+              <Hint size="small" type="tertiary">
+                <QuestionMarkIcon size={18} color="currentColor" />
+                {t(
+                  "Open search from anywhere with the {{ shortcut }} shortcut",
+                  {
+                    shortcut: `${metaDisplay} + k`,
+                  }
+                )}
+              </Hint>
+            )}
+          </Animator>
+        </Positioner>
+      </KBarPortal>
+    </>
   );
 }
 
@@ -59,6 +73,20 @@ function KBarPortal({ children }: { children: React.ReactNode }) {
   return <Portal>{children}</Portal>;
 }
 
+const Hint = styled(Text)`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: ${(props) => props.theme.secondaryBackground};
+  border-top: 1px solid ${(props) => props.theme.background};
+  margin: 1px 0 0;
+  padding: 6px 16px;
+  width: 100%;
+
+  position: absolute;
+  bottom: 0;
+`;
+
 const Positioner = styled(KBarPositioner)`
   z-index: ${(props) => props.theme.depths.commandBar};
 `;