web: add command palette button in status bar (#7977)

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

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

@@ -227,7 +227,8 @@ import {
   mdiArrowCollapseRight,
   mdiNoteEditOutline,
   mdiArrowUp,
-  mdiInbox
+  mdiInbox,
+  mdiConsoleLine
 } from "@mdi/js";
 import { useTheme } from "@emotion/react";
 import { Theme } from "@notesnook/theme";
@@ -452,6 +453,7 @@ export const ImageDownload = createIcon(mdiImage);
 export const Billboard = createIcon(mdiBillboard);
 export const Cellphone = createIcon(mdiCellphone);
 export const CellphoneLock = createIcon(mdiCellphoneLock);
+export const ConsoleLine = createIcon(mdiConsoleLine);
 export const FileLock = createIcon(mdiFileLockOutline);
 export const ShieldLock = createIcon(mdiShieldLockOutline);
 export const ImageMultiple = createIcon(mdiImageMultipleOutline);

apps/web/src/components/status-bar/index.tsx

@@ -29,7 +29,8 @@ import {
   SyncOff,
   Icon,
   Unlock,
-  CellphoneLock
+  CellphoneLock,
+  ConsoleLine
 } from "../icons";
 import { useStore as useUserStore } from "../../stores/user-store";
 import { useStore as useAppStore } from "../../stores/app-store";
@@ -45,6 +46,7 @@ import { strings } from "@notesnook/intl";
 import { useVault } from "../../hooks/use-vault";
 import { useKeyStore } from "../../interfaces/key-store";
 import { STATUS_BAR_HEIGHT } from "../../common/constants";
+import { CommandPaletteDialog } from "../../dialogs/command-palette";
 
 function StatusBar() {
   const user = useUserStore((state) => state.user);
@@ -73,6 +75,20 @@ function StatusBar() {
         <Flex />
       ) : (
         <Flex sx={{ gap: "small" }}>
+          <Button
+            variant="statusitem"
+            onClick={() => CommandPaletteDialog.show({ isCommandMode: true })}
+            sx={{
+              alignItems: "center",
+              justifyContent: "center",
+              display: "flex",
+              color: "paragraph",
+              height: "100%"
+            }}
+            title={"Open command palette"}
+          >
+            <ConsoleLine size={12} />
+          </Button>
           {isLoggedIn ? (
             <>
               {user?.isEmailConfirmed ? (